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";
box.style.marginLeft = "0px";
circle[count].style.backgroundColor = "red";
500);
}
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;
}
<!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>文章来源: 二十、JS轮播停留效果