您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)使用JavaScript怎么實(shí)現(xiàn)輪播停留效果,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
一、思路
1.輪播停留與無(wú)線滾動(dòng)十分類似,都是利用屬性及變量控制移動(dòng)實(shí)現(xiàn)輪播;
2.不同的是輪播停留需要添加過(guò)渡屬性搭配定時(shí)器即可實(shí)現(xiàn)輪播停留效果;
二、步驟
1.寫(xiě)基本結(jié)構(gòu)樣式
需在末尾多添加一張與第一張相同的圖片,消除切換時(shí)的抖動(dòng);
2.添加輪播停留事件 有了之前的基礎(chǔ),直接添加索引圈默認(rèn)事件到輪播停留事件內(nèi);
注意:當(dāng)輪播到最后一張時(shí),需要消除掉過(guò)渡,這里使用setTimeout定時(shí)器,卡最后一張圖片輪播完不延時(shí),直接跳轉(zhuǎn)到第一張,由于第一張和最后一張一樣,所以會(huì)形成視覺(jué)盲區(qū),看起來(lái)是連續(xù)輪播效果;
//輪播停留方法 function move() { box.className = "box anmint"; circle[count].style.backgroundColor = ""; count++; box.style.marginLeft = (-800 * count) + "px"; //最后一張走完之后,執(zhí)行一次定時(shí)器不循環(huán),卡過(guò)渡時(shí)間,消除切換 setTimeout(function () { if (count >= 6) { count = 0; box.className = "box"; //marginLeft=0之前去除過(guò)渡屬性 box.style.marginLeft = "0px"; } circle[count].style.backgroundColor = "red"; }, 500); }
3.添加進(jìn)入索引圈事件
這和淡入淡出進(jìn)入索引圈事件基本一致,不同的是這里不用調(diào)用輪播停留事件,直接利用當(dāng)前index來(lái)索引使圖片跟隨變換;注意最后要標(biāo)記count=this.index
值,令再次執(zhí)行默認(rèn)行為時(shí)是緊跟著當(dāng)前顯示圖片向后執(zhí)行默認(rèn)行為;
//進(jìn)入索引圈事件 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"; //圖片跟隨移動(dòng) box.className="box anmint"; box.style.marginLeft=(-800*this.index)+"px"; count=this.index; } }
4.完善鼠標(biāo)進(jìn)入離開(kāi)代碼
效果圖:
完整代碼:
<!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); //鼠標(biāo)進(jìn)入事件 var block=document.getElementsByClassName("block")[0]; block.onmouseenter=function(){ clearInterval(time); }; //鼠標(biāo)離開(kāi)事件 block.onmouseleave=function(){ time=setInterval(function(){ move(); },2000); }; //進(jìn)入索引圈事件 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"; //圖片跟隨移動(dòng) 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í)行一次定時(shí)器不循環(huán),卡過(guò)渡時(shí)間,消除切換 setTimeout(function () { if (count >= 6) { count = 0; box.className = "box"; //marginLeft=0之前去除過(guò)渡屬性 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>
看完上述內(nèi)容,你們對(duì)使用JavaScript怎么實(shí)現(xiàn)輪播停留效果有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。