12行原生JS代碼實現(xiàn)最簡單的圖片輪播

keithxiaoy 發(fā)布于2019-08-20 15:59 / 1240人閱讀

摘要：如果有錯誤，請指出，請原諒。俄羅斯左箭頭右箭頭將所有放入一個數(shù)組，將的值設(shè)置為俄羅斯加拿大楓葉澳大利亞澳大利亞加拿大楓葉澳大利亞獲取的屬性值，通過對進行加，將對應(yīng)的數(shù)組元素設(shè)置為的屬性。定時器被取消后，需要重新設(shè)置定時器。利用定時器開始輪播

圖片輪播

js新手。如果有錯誤，請指出，請原諒。
``
//


   

 
   左箭頭

 
   右箭頭

// 4.21
// 將所有URL放入一個數(shù)組，將index的值設(shè)置為0
var imgs = ["picture/俄羅斯.jpg","picture/加拿大楓葉.jpg","picture/澳大利亞.jpg","picture/澳大利亞2.jpg","picture/加拿大楓葉.jpg","picture/澳大利亞.jpg"];
var index = 0;
var stopValue = 0；
var startValue = 0;
// 獲取img的src屬性值，通過對index進行加1，將對應(yīng)的數(shù)組元素設(shè)置為img的src屬性。
function carousel(){
    var img = document.getElementsByTagName("img")[0]
    if (index < imgs.length-1) {
        index++;
        img.setAttribute("src",imgs[index]);
    } else { // 當index值變成5，進入循環(huán)時，將img的src屬性設(shè)置為第一個url地址，同時index值變?yōu)?
        img.setAttribute("src","picture/俄羅斯.jpg")
        index = 0;
    }

}
// 4.22 鼠標進入stop，鼠標離開start功能.
//鼠標移動到箭頭所在的元素清楚定時器，鼠標離開則恢復(fù)輪播
// 定義兩個全局變量stopValue 和startValue 為0；

// onmouseover和onmouseout從進入對應(yīng)的元素范圍到離開對應(yīng)的元素范圍會執(zhí)行很多次，
// 通過兩個全局全局變量，讓它不管在對應(yīng)的元素范圍內(nèi)如何移動都只執(zhí)行一次，
//  避免setInterval時間出錯。
function stop(){
   stopValue+=1;
   if(stopValue < 2){
        clear();
       // 當?shù)谝淮蝟nmouseover和onmouseout事件完成之后，全局變量的值改變，
       // 通過將兩個全局變量的值歸零，保證之后的onmouseover和onmouseout能執(zhí)行。
       startValue = 0
   }

};

 function start(){
    startValue+=1;
    if(startValue < 2){
        setInt()
        // 同上。
        stopValue = 0;
    }
};
    function clear() {
    clearInterval(int)
};
    function setInt(){
    // 定時器被clearInterval取消后，需要重新設(shè)置定時器。
    int = setInterval("carousel()",1000)
};
    // 利用定時器開始輪播
    var int= setInterval("carousel()",1000)