原生JavaScript輪播效果，噢，其實什麼才叫原生

時間 2019-12-06

原文原文鏈接

這年頭，哪一個app，哪一個小程序沒個輪播圖呢，而且鴨，哪一個ui框架不給你提供呢是吧。
可是懂寫原生輪播圖是否是也很裝逼呀嘻嘻。so，咱們仍是先得理解輪播圖的技術要點是什麼吧css

1. 使用定時器定時切換圖片輪播效果
2. 鼠標停留在圖片上時中止切換圖片，離開後繼續切換圖片
3. 圖片點擊上一張下一張時自動切換，並自我進行判斷是否爲第一張或最後一張。
當圖片爲第一張時，點擊上一張到最後一張圖片，當圖片爲最後一張時，點擊下一張到第一張。html

HTML結構（毫無美感的html，畢竟就一個demo嘛）小程序

<body>        
    <div style="float: left;width: 15%;">
        <span onclick="left()">上一張</span>
    </div>
    <div style="float: left;width: 60%;height: 450px;" onmouseover="stop()" onmouseout="start()">
        <img  style="width: 500px;height: 450px;" src="img/1.jpg" />
    </div>            
    <div>
        <span onclick="right()">下一張</span>
    </div>
</body>

JavaScript代碼segmentfault

/*
 * 1.使用定時器定時切換圖片輪播效果
 * 2.鼠標停留在圖片上時中止切換圖片，離開後繼續切換圖片
 * 3.圖片點擊上一張下一張時自動切換，並自我進行判斷是否爲第一張或最後一張。
 *   當圖片爲第一張時，點擊上一張到最後一張圖片，當圖片爲最後一張時，點擊下一張到第一張。
 * 
 * onmouseover 事件會在鼠標指針移動到指定的對象上時發生。
 * onmouseout 事件會在鼠標指針移出指定的對象時發生。
 * */

// 將全部圖片url放入一個數組，將index的值設置爲0
var imgs = ["img/1.jpg", "img/2.jpg", "img/3.jpg"];
var index = 0;
var stopValue = 0;
var startValue = 0;
var img = document.getElementsByTagName("img")[0]; // 獲取img的dom
function carousel() { // 切換圖片        
    if (index < imgs.length-1) {
        index++;
        img.setAttribute("src", imgs[index]);
    } else{
        index = 0;
        img.setAttribute("src", imgs[index]);
    }
}
/*
 * 定義兩個全局變量stopValue 和startValue 爲0，
 * onmouseover和onmouseout從進入對應的元素範圍到離開對應的元素範圍會執行不少次，
 * 經過兩個全局全局變量，讓它無論在對應的元素範圍內如何移動都只執行一次，
 * 避免setInterval時間出錯。
 * */
function stop(){ // 進入圖片時中止輪播
    stopValue+=1;
    if (stopValue < 2) {
        clear();
        startValue = 0;
    }
}
function start(){ // 離開圖片時繼續輪播
    startValue+=1;
    if (startValue < 2) {
        setInt();
        stopValue = 0;
    }
}
function clear(){ // 清除定時器
    clearInterval(int);
}
function setInt(){ // 從新執行定時器
    int = setInterval("carousel()", 3000);
}
/*
 * 在切換圖片時也調用了shop()和start()方法
 * 目的時爲了解除在輪播過程當中，在即將切換圖片時，手動切換圖片了卻又立馬進入到下一張圖片
 * */
function left(){ // 上一張切換圖片
    stop();
    if (index > 0) {
        index -= 1;
        img.setAttribute("src", imgs[index]);
    } else{
        index = imgs.length-1;
        img.setAttribute("src", imgs[index]);
    }
    start();
}
function right(){ // 下一張切換圖片
    stop();
    if (index < imgs.length-1) {
        index +=1;
        img.setAttribute("src", imgs[index]);
    } else{
        index = 0;
        img.setAttribute("src", imgs[index]);
    }
    start();
}
var int = setInterval("carousel()", 3000);

噢對了，此次滴文章參考了這位大大的文章，嘻嘻該認可仍是得認可，誰讓我仍是一個孩子呢
貌似這距離實用的輪播效果不遠了呀，但確定還有不少缺點，望你們指出~~~
我滴媽呀，可能加個css過渡效果可能會順眼不少，可誰讓我css渣呢，不說了去進修先~~~數組

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。