下面通过本文给大家分享javascript轮播停留效果的实现思路，轮播停留与无线滚动十分类似，都是利用属性及变量控制移动实现轮播。感兴趣的朋友一起看看吧
一、思路
1.轮播停留与无线滚动十分类似，都是利用属性及变量控制移动实现轮播；
2.不同的是轮播停留需要添加过渡属性搭配定时器即可实现轮播停留效果；
二、步骤
立即学习“Java免费学习笔记（深入）”；
1.写基本结构样式
需在末尾多添加一张与第一张相同的图片，消除切换时的抖动；
2.添加轮播停留事件 有了之前的基础，直接添加索引圈默认事件到轮播停留事件内；
注意：当轮播到最后一张时，需要消除掉过渡，这里使用setTimeout定时器，卡最后一张图片轮播完不延时，直接跳转到第一张，由于第一张和最后一张一样，所以会形成视觉盲区，看起来是连续轮播效果；
//轮播停留方法function move() { box.className = "box anmint"; circle[count].style.backgroundColor = ""; count++; box.style.marginLeft = (-800 * count) + "px"; //最后一张走完之后，执行一次定时器不循环，卡过渡时间，消除切换 setTimeout(function () { if (count >= 6) { count = 0; box.className = "box"; //marginLeft=0之前去除过渡属性 box.style.marginLeft = "0px"; } circle[count].style.backgroundColor = "red"; }, 500);}登录后复制
3.添加进入索引圈事件
这和淡入淡出进入索引圈事件基本一致，不同的是这里不用调用轮播停留事件，直接利用当前index来索引使图片跟随变换；注意最后要标记count=this.index值，令再次执行默认行为时是紧跟着当前显示图片向后执行默认行为；
//进入索引圈事件for(var j=0;j4.完善鼠标进入离开代码
效果图：
完整代码：
nbsp;html>JS轮播停留效果 *{margin: 0;padding: 0;} html,body{width: 100%;height: 100%;} .block{ width: 800px; height: 400px; margin: 80px auto; position: relative; border: 1px solid red; overflow: hidden; } .box{ width: 5600px; height: 400px; float: left; } .anmint{ transition: all 0.5s ease-in-out; } img{ width: 800px; height: 400px; float: left; } .cir{ width: 150px; height: 20px; z-index: 7; position: absolute; bottom: 10px; left: 320px; } .circle{ width: 10px; height: 10px; border: 2px solid grey; border-radius: 50%; float: left; margin: 0 5px; } window.onload=function(){ var box=document.getElementsByClassName("box")[0]; var count=0; //索引圈事件 var circle=document.getElementsByClassName("circle"); circle[0].style.backgroundColor="red"; var time=setInterval(function(){ move(); },2000); //鼠标进入事件 var block=document.getElementsByClassName("block")[0]; block.onmouseenter=function(){ clearInterval(time); }; //鼠标离开事件 block.onmouseleave=function(){ time=setInterval(function(){ move(); },2000); }; //进入索引圈事件 for(var j=0;j<circle.length;j++){ circle[j].index=j; circle[j].onmouseenter=function(){ for(var k=0;k= 6) { count = 0; box.className = "box"; //marginLeft=0之前去除过渡属性 box.style.marginLeft = "0px"; } circle[count].style.backgroundColor = "red"; }, 500); } }
![关于JavaScript轮播停留效果的实现]()
![关于JavaScript轮播停留效果的实现]()
![关于JavaScript轮播停留效果的实现]()
![关于JavaScript轮播停留效果的实现]()
![关于JavaScript轮播停留效果的实现]()
![关于JavaScript轮播停留效果的实现]()
![关于JavaScript轮播停留效果的实现]()
登录后复制
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
关于vue.js轮播图组件的使用方法
VUE 3D轮播图封装实现方法
以上就是关于JavaScript轮播停留效果的实现的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2747250.html
