利用回撥函式實現簡單的輪播圖效果

dear#嫑閙發表於2019-05-19
函式

利用回撥函式實現簡單的輪播圖效果

對於初學者而言，提到輪播圖，首先想到到的是利用for迴圈和定時器來實現圖片的迴圈播放，但是實踐證明，在for迴圈中使用定時器並不能實現圖片之間的過度和圖片的迴圈播放。那麼輪播圖該怎樣實現呢？
在js中，回撥函式實際也是一種迴圈，而且如果不設定限制條件，回撥函式是一個死迴圈。
回撥函式就是在函式內部呼叫函式自身。
下面就用回撥函式做一個簡單的輪播圖。

首先建立一個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);

整個函式是一個封裝的函式，傳入對應的引數便可直接使用。

需要注意的點：當設定條件停止迴圈或者重新啟動迴圈時，（以滑鼠懸浮為例）當滑鼠移出是，讓迴圈繼續，就必須給setIn重新賦值，否則setIn和滑鼠移除事件函式中的迴圈同時發生，就會出現多個迴圈同時進行，導致圖片混亂。

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

需求分析：
  • 圖片間隔1S自動迴圈播放.
  • 滑鼠放在上面時播放停止 .
思路：

通過ul的相對位置的迴圈移動，實現圖片展示效果的迴圈.

  • 建立函式.
  • 設定ul的初始位置，引入引數來儲存移動距離
  • 建立函式，設定ul的移動，並將其轉換成ul的相對定位
  • 插入時間貞，讓omove每隔1s執行一次
  • 函式中設定停止條件，當最後一個圖中展示完成時結束迴圈，並開始下一輪迴圈

所用知識點：
定時器：setInterval()，解除定時 clearInterval，回撥函式

希望本段分享可以給大家帶來幫助，歡迎大家提出意見和建議。謝謝！

相關文章