JavaScript轮播停留效果的实现思路

前端之家收集整理的这篇文章主要介绍了JavaScript轮播停留效果的实现思路前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、思路

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.完善鼠标进入离开代码

效果图:

完整代码

<Meta charset="UTF-8"> JS轮播停留<a href="/tag/xiaoguo/" target="_blank" class="keywords">效果</a>
Box"> Box1.jpg"> Box2.jpg"> Box3.jpg"> Box4.jpg"> Box5.jpg"> Box6.jpg"> Box1.jpg">

总结

以上所述是小编给大家介绍的JavaScript轮播停留效果的思路详解。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的JavaScript相关文章