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

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,回撥函式

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

相關文章