一、思路
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輪播停留效果的思路詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持！
新聞熱點
疑難解答
