一、思路
1.轮播停留与无线滚动十分类似,都是利用属性及变量控制移动实现轮播;
2.不同的是轮播停留需要添加过渡属性搭配定时器即可实现轮播停留效果;
二、步骤
1.写基本结构样式
2.添加轮播停留事件 有了之前的基础,直接添加索引圈默认事件到轮播停留事件内;
注意:当轮播到最后一张时,需要消除掉过渡,这里使用setTimeout定时器,卡最后一张图片轮播完不延时,直接跳转到第一张,由于第一张和最后一张一样,所以会形成视觉盲区,看起来是连续轮播效果;
= 6) {
count = 0;
Box.className = "Box";
//marginLeft=0之前去除过渡属性
Box.style.marginLeft = "0px";
}
circle[count].style.backgroundColor = "red";
},500);
}
3.添加进入索引圈事件
这和淡入淡出进入索引圈事件基本一致,不同的是这里不用调用轮播停留事件,直接利用当前index来索引使图片跟随变换;注意最后要标记count=this.index
值,令再次执行默认行为时是紧跟着当前显示图片向后执行默认行为;
图片跟随移动
Box.className="Box anmint";
Box.style.marginLeft=(-800*this.index)+"px";
count=this.index;
}
}
4.完善鼠标进入离开代码
效果图:
完整代码: