微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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值,令再次执行认行为时是紧跟着当前显示图片后执行认行为;

rush:js;"> //进入索引圈事件 for(var j=0;j图片跟随移动 Box.className="Box anmint"; Box.style.marginLeft=(-800*this.index)+"px"; count=this.index; } }

4.完善鼠标进入离开代码

效果图:

完整代码

rush:js;"> <Meta charset="UTF-8"> JS轮播停留<a href="https://www.jb51.cc/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 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐