利用函數遞歸實現簡單的輪播圖效果

時間 2019-11-13

原文原文鏈接

利用遞歸實現簡單的輪播圖效果

對於初學者而言，提到輪播圖，首先想到到的是利用for循環和定時器來實現圖片的循環播放，可是實踐證實，在for循環中使用定時器並不能實現圖片之間的過分和圖片的循環播放。那麼輪播圖該怎樣實現呢？
在js中，遞歸實際也是一種循環，並且若是不設置限制條件，遞歸是一個死循環。
遞歸函數就是在函數內部調用函數自身。
下面就用遞歸函數作一個簡單的輪播圖。css

首先建立一個html文件，引入幾張圖片

最後一張和第一張圖片是同樣的，是爲了更好地顯示過渡的效果html

<body>
    <div class="box">
        <ul id="list">
            <li><img src="imgs/1.jpg"></li>
            <li><img src="imgs/2.jpg"></li>
            <li><img src="imgs/3.jpg"></li>
            <li><img src="imgs/4.jpg"></li>
            <li><img src="imgs/5.jpg"></li>
            <li><img src="imgs/6.jpg"></li>
            <li><img src="imgs/7.jpg"></li>
            <li><img src="imgs/1.jpg"></li>
        </ul>
    </div>
</body>

設置一下基本樣式

.box{
    width: 600px;
    height: 320px;
    border: 2px solid red;
    margin:20px auto;
    overflow: hidden;
}

/* 調整li尺寸與顯示框相同大小，並讓li橫向並排顯示 */
.box ul{
    width: 4800px;
    position: relative;
    left:0px;
}
.box ul li{
    float: left;
    width: 600px;
    height: 320px;
    background-color: aqua;
}

/* li中圖片大小與li窗口大小一致 */

#list li img{
    width: 600px;
    height: 320px;
}

下面來寫js

我是將函數進行了封裝，已便後期重複使用。
下面是函數使用的參數：函數

move 一次性移動的距離（有正負之分）
yctime 延遲時間（單位：毫秒）
gdTime 過分時間（單位：秒）
num 表示li的個數

// 獲取ul標籤
    var list = document.getElementById("list");
// 獲取li標籤的寬度（每一次須要移動的距離）
    var oLi = list.children;
    var oLiMove = oLi[0].scrollWidth;
    var num = oLi.length;
    
// 建立函數
function oMove(move,num,yctime,gdTime){ 
    // 設定ul的相對行爲初始值
    list.style.transition =0 + "s";
    list.style.left = 0 + "px";
    var a = 0;
        function omove(){
            a = a - Number(move);
            console.log(a)
            list.style.transition =0.8 + "s";
            list.style.left = a + "px";
                    
            if(a <= -move * num)    {
                clearInterval(setIn);
                // 遞歸函數
                oMove(move,num,yctime,gdTime);
            }   
        }
        // 插入時間貞
        var setIn = setInterval(omove,yctime);
        // 設置懸停（鼠標懸浮事件）
        list.onmouseover = function(){
            clearInterval(setIn);
            console.log(1);   
        }
        // 設置移除開始循環
        list.onmouseout = function(){
            setIn = setInterval(omove,yctime);   
            console.log(2);
        }           
}
oMove(oLiMove,num,2000,0.8);

整個函數是一個封裝的函數，傳入對應的參數即可直接使用。code

須要注意的點：當設置條件中止循環或者從新啓動循環時，（以鼠標懸浮爲例）當鼠標移出是，讓循環繼續，就必須給setIn從新賦值，不然setIn和鼠標移除事件函數中的循環同時發生，就會出現多個循環同時進行，致使圖片混亂。htm

下面使用的一點編寫思路，僅供參考：遞歸