时间:2021-05-26
一、思路
1.轮播停留与无线滚动十分类似,都是利用属性及变量控制移动实现轮播;
2.不同的是轮播停留需要添加过渡属性搭配定时器即可实现轮播停留效果;
二、步骤
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;j<circle.length;j++){ circle[j].index=j; circle[j].onmouseenter=function(){ for(var k=0;k<circle.length;k++){ circle[k].style.backgroundColor=""; } this.style.backgroundColor="red"; //图片跟随移动 box.className="box anmint"; box.style.marginLeft=(-800*this.index)+"px"; count=this.index; }}4.完善鼠标进入离开代码
效果图:
完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS轮播停留效果</title> <style> *{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; } </style> <script> 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<circle.length;k++){ circle[k].style.backgroundColor=""; } this.style.backgroundColor="red"; //图片跟随移动 box.className="box anmint"; box.style.marginLeft=(-800*this.index)+"px"; count=this.index; } } //轮播停留方法 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); } } </script> </head> <body> <div class="block"> <div class="box"> <img class="imgg" src="./image/box1.jpg"> <img class="imgg" src="./image/box2.jpg"> <img class="imgg" src="./image/box3.jpg"> <img class="imgg" src="./image/box4.jpg"> <img class="imgg" src="./image/box5.jpg"> <img class="imgg" src="./image/box6.jpg"> <img class="imgg" src="./image/box1.jpg"> </div> <div class="cir"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div> </div> </body> </html>总结
以上所述是小编给大家介绍的JavaScript轮播停留效果的思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了JavaScript实现简单的轮播图的具体代码,供大家参考,具体内容如下js轮播图实现思路1、先获取元素盒子左右按钮2、鼠标经过显示/隐藏左
推荐阅读:Jquery代码实现图片轮播效果(一)在上篇文章给大家介绍了Javascript实现图片轮播效果(一)让图片跳动起来,这里我们实现图片序列节点的跳转实
本文实例为大家分享了javascript实现滚轮轮播图片的具体代码,供大家参考,具体内容如下效果图如下,只能用滚轮移动到头部和尾部思路:根据需要展示的图片数量(
本文实例为大家分享了js实现图片轮播效果的具体代码,供大家参考,具体内容如下首先给大家看一看js图片轮播效果,如下图具体思路:一、页面加载、获取整个容器、所有放
本文实例为大家分享了jQuery图片轮播效果,很个性,具体内容如下购物产品展示:图片轮播器,效果如下所示:思路说明:每隔一段时间,实现图片的自动切换及选项卡选中