今天就跟大家聊聊有關(guān)使用JavaScript怎么實(shí)現(xiàn)輪播停留效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)公司2013年至今，先為南豐等服務(wù)建站，南豐等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為南豐企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

一、思路

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
4.完善鼠標(biāo)進(jìn)入離開(kāi)代碼
效果圖：
完整代碼：