一、思路
1.輪播停留與無線滾動十分類似，都是利用屬性及變量控制移動實現(xiàn)輪播；
2.不同的是輪播停留需要添加過渡屬性搭配定時器即可實現(xiàn)輪播停留效果；
二、步驟
1.寫基本結(jié)構(gòu)樣式
需在末尾多添加一張與第一張相同的圖片，消除切換時的抖動；
2.添加輪播停留事件 有了之前的基礎(chǔ)，直接添加索引圈默認事件到輪播停留事件內(nèi)；
注意：當(dāng)輪播到最后一張時，需要消除掉過渡，這里使用setTimeout定時器，卡最后一張圖片輪播完不延時，直接跳轉(zhuǎn)到第一張，由于第一張和最后一張一樣，所以會形成視覺盲區(qū)，看起來是連續(xù)輪播效果；
//輪播停留方法function move() { box.className = "box anmint"; circle[count].style.backgroundColor = ""; count++; box.style.marginLeft = (-800 * count) + "px"; //最后一張走完之后，執(zhí)行一次定時器不循環(huán)，卡過渡時間，消除切換 setTimeout(function () { if (count >= 6) { count = 0; box.className = "box"; //marginLeft=0之前去除過渡屬性 box.style.marginLeft = "0px"; } circle[count].style.backgroundColor = "red"; }, 500);}3.添加進入索引圈事件
這和淡入淡出進入索引圈事件基本一致，不同的是這里不用調(diào)用輪播停留事件，直接利用當(dāng)前index來索引使圖片跟隨變換；注意最后要標記count=this.index值，令再次執(zhí)行默認行為時是緊跟著當(dāng)前顯示圖片向后執(zhí)行默認行為；
//進入索引圈事件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"; //最后一張走完之后，執(zhí)行一次定時器不循環(huán)，卡過渡時間，消除切換 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> 總結(jié)
以上所述是小編給大家介紹的JavaScript輪播停留效果的思路詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
