老师我这里切换幻灯片到第一张往前怎么会有空白
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>4.3 幻灯片的核心部分</title>
<link rel="stylesheet" href="css/slider.css">
</head>
<body>
<div id="slider" class="slider">
<div class="slider-item-container">
<div class="slider-item">
<a href="###" class="slider-link">
<img src="img/1.jpg" alt="slider" class="slider-img">
</a>
</div>
<div class="slider-item">
<a href="###" class="slider-link">
<img src="img/2.jpg" alt="slider" class="slider-img">
</a>
</div>
<div class="slider-item">
<a href="###" class="slider-link">
<img src="img/3.jpg" alt="slider" class="slider-img">
</a>
</div>
<div class="slider-item">
<a href="###" class="slider-link">
<img src="img/4.jpg" alt="slider" class="slider-img">
</a>
</div>
<div class="slider-item">
<a href="###" class="slider-link">
<img src="img/5.jpg" alt="slider" class="slider-img">
</a>
</div>
</div>
<!-- <div class="slider-indicator-container">
<span class="slider-indicator"></span>
<span class="slider-indicator"></span>
<span class="slider-indicator"></span>
<span class="slider-indicator"></span>
<span class="slider-indicator"></span>
</div> -->
</div>
<button id="prev">prev</button>
<button id="next">next</button>
<script>
function Slider(el, options) {
// 处理参数，优先使用用户传递的参数，没传的使用默认参数
var defaults = {
initIndex:0,
speed: 300,
hasIndicator: false
};
// 实际使用的参数
this.options = {};
this.options.initIndex = typeof options.initIndex !== 'undefined' ? options.initIndex : defaults.initIndex;
console.log(this.options.initIndex);
this.options.speed = typeof options.speed !== 'undefined' ? options.speed : defaults.speed;
this.options.hasIndicator = typeof options.hasIndicator !== 'undefined' ? options.hasIndicator : defaults.hasIndicator;
this.el = el;
this.itemContainer = el.querySelector('.slider-item-container');
this.items = this.itemContainer.children;
// 每次切换的距离(一张幻灯片的宽度)
this.distancePerSlide = this.items[0].offsetWidth;
// 索引
this.minIndex = 0;
this.maxIndex = this.items.length - 1;
// this.index = this.options.initIndex;
this.index = this._adjustIndex(this.options.initIndex);
// 移动到指定索引
this.move(this.getDistanceByIndex(this.index));
// 是否需要指示器indicator
if (this.options.hasIndicator) {
this._createIndicators();
this._setIndicatorActive(this.index);
}
}
// 切换到指定索引的幻灯片
Slider.prototype.to = function (index) {
this.index=index;
this._setTransitionSpeed(this.options.speed);
this.move(this.getDistanceByIndex(this.index));
var self=this;
this.itemContainer.addEventListener('transitionend',function(){
// self._setTransitionSpeed(0);
},false);
if(this.options.hasIndicator){
this._setIndicatorActive(this.index);
}
};
Slider.prototype._setTransitionSpeed = function (speed) {
this.itemContainer.style.transitionDuration=speed+'ms';
};
// 切换到上一张幻灯片
Slider.prototype.prev = function () {
this.to(this.index-1);
};
// 切换到下一张幻灯片
Slider.prototype.next = function () {
this.to(this.index+1);
};
// 修正索引值，让它保持在最小和最大索引值之间
Slider.prototype._adjustIndex = function (index) {
if(index<this.minIndex){
index=this.minIndex;
}else if(index>this.maxIndex){
index=this.maxIndex;
}
console.log(index);
return index;
};
Slider.prototype.move = function (distance) {
this.itemContainer.style.transform='translate3d('+distance+'px,0,0)';
};
Slider.prototype.getDistanceByIndex = function (index) {
return -index*this.distancePerSlide;
};
Slider.prototype._createIndicators = function () {
var indicatorContainer = document.createElement('div');
var html = '';
indicatorContainer.className = 'slider-indicator-container';
for (var i = 0; i <= this.maxIndex; i++) {
html += '<span class="slider-indicator"></span>';
}
indicatorContainer.innerHTML = html;
this.el.appendChild(indicatorContainer);
};
Slider.prototype._setIndicatorActive = function (index) {
this.indicators=this.indicators||this.el.querySelectorAll('.slider-indicator');
for(var i=0;i<this.indicators.length;i++){
this.indicators[i].classList.remove('slider-indicator-active');
}
this.indicators[index].classList.add('slider-indicator-active');
};
</script>
<script>
var slider = new Slider(document.getElementById('slider'), {
initIndex:2, // 初始显示第几张幻灯片，从0开始
speed: 300, // 幻灯片的切换速度
hasIndicator: true // 是否需要指示器indicator
});
document.getElementById('prev').addEventListener('click', function () {
// 切换上一张幻灯片
slider.prev();
}, false);
document.getElementById('next').addEventListener('click', function () {
// 切换下一张幻灯片
slider.next();
}, false);
</script>
</body>
</html>
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
img{
border:none;
vertical-align: top;
}
a{
-webkit-tap-highlight-color:transparent;
}
/* slider */
.slider{
overflow: hidden;
position: relative;
width:100%;
height:183px;
}
.slider-item-container,
.slider-item,
.slider-link,
.slider-img{
width: 100%;
height: 100%;
}
.slider-item-container{
display: flex;
transition:transform 0;
}
.slider-item{
flex-shrink: 0;
}
.slider-link{
display: block;
}
.slider-img{
}
.slider-indicator-container{
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
}
.slider-indicator{
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #000;
opacity: 0.2;
margin-right: 8px;
}
.slider-indicator-active{
background-color:#007aff;
opacity: 1;
}
14
收起
正在回答 回答被采纳积分+1
2回答
好帮手慕慕子
2021-06-12 14:22:26
同学你好，可以参考如下思路实现一个简单的轮播图切换效果，如下：
1、克隆第一张图片，添加到容器中
2、调整创建小圆点的循环条件，将this.maxIndex值减一
3、在to方法中添加判断，可以直接复制这部分代码测试下
// 切换到指定索引的幻灯片
Slider.prototype.to = function (index) {
this.index = index;
this._setTransitionSpeed(this.options.speed);
if (this.index < this.minIndex) {
this._setTransitionSpeed(0);
// 移动到指定索引
this.move(this.getDistanceByIndex(this.maxIndex));
// 设置一个延时器，这个延时器的延时时间可以是0毫秒，虽然是0毫秒，但是可以让我们过渡先是瞬间取消，然后再加上
setTimeout(() => {
// 加过渡
this._setTransitionSpeed(this.options.speed);
// 改为真正的最后一张
this.index = this.maxIndex - 1
this.move(this.getDistanceByIndex(this.maxIndex - 1));
if (this.options.hasIndicator) {
this._setIndicatorActive(this.index);
}
}, 0);
return
}
if (this.index >= this.maxIndex) {
this._setTransitionSpeed(this.options.speed);
setTimeout(() => {
// 取消掉过渡，因为要的是瞬间移动，不是“咕噜”回去
this._setTransitionSpeed(0);
this.move(this.getDistanceByIndex(this.minIndex));
this.index = this.minIndex
if (this.options.hasIndicator) {
this._setIndicatorActive(this.index);
}
}, this.options.speed);
}
this.move(this.getDistanceByIndex(this.index));
// 调整判断条件
if (this.options.hasIndicator && this.index < this.maxIndex && this.index > this.minIndex) {
this._setIndicatorActive(this.index);
}
};
课程中主要是想让大家理解移动端轮播图的实现原理是什么，同学结合老师提供的代码测试简单了解下即可，因为实际开发中，很少会手写这样的轮播图，一般都会使用现成的插件，比如swiper，后面的课程中会有详细的讲解，而且最后的项目也是结合swiper来实现轮播效果的。如下：
祝学习愉快~
好帮手慕久久
2021-05-29 09:46:53
同学你好，解答如下：
有空白是因为slider-item-container往右移动超出了可视区，此时可视区内没有轮播图片：
造成该现象的原因是切换轮播图时，没有控制轮播图的索引在合理的范围内。当前幻灯片的索引（轮播图的索引）应该在minIndex和maxIndex之间，调整如下：
祝学习愉快！
-
五维码 #1
老师，像图片中这样用 _adjustIndex 方法校正轮播图的索引的话，到第一张或最后一张就会停住，这样就不是无缝幻灯片切换了吧。
我在想是不是将传入的 index 索引值判断一下，这样就可以做到无缝切换了
if (index < this.minIndex) {
index = this.maxIndex;
} else if (index > this.maxIndex) {
index = this.minIndex;
}不过在 to 方法加这个判断可以吗，还是加到别处
Slider.prototype.to = function (index) {
if (index < this.minIndex) {
index = this.maxIndex;
} else if (index > this.maxIndex) {
index = this.minIndex;
}
this.index = index;
this._setTransitionSpeed(this.options.speed);
this.move(this.getDistanceByIndex(this.index));
var self = this;
this.itemContainer.addEventListener('transitionend', function () {
// self._setTransitionSpeed(0);
}, false);
if (this.options.hasIndicator) {
this._setIndicatorActive(this.index);
}
};2021-06-12 00:24:59
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星