原生JavaScript輪播效果，噢，其實(shí)什么才叫原生

pkhope 發(fā)布于2019-08-23 14:02 / 1441人閱讀

摘要：結(jié)構(gòu)毫無美感的，畢竟就一個(gè)嘛上一張下一張代碼使用定時(shí)器定時(shí)切換圖片輪播效果鼠標(biāo)停留在圖片上時(shí)停止切換圖片，離開后繼續(xù)切換圖片圖片點(diǎn)擊上一張下一張時(shí)自動(dòng)切換，并自我進(jìn)行判斷是否為第一張或最后一張。

這年頭，哪個(gè)app，哪個(gè)小程序沒個(gè)輪播圖呢，并且鴨，哪個(gè)ui框架不給你提供呢是吧。
但是懂寫原生輪播圖是不是也很裝逼呀嘻嘻。so，我們還是先得理解輪播圖的技術(shù)要點(diǎn)是什么吧

1. 使用定時(shí)器定時(shí)切換圖片輪播效果
2. 鼠標(biāo)停留在圖片上時(shí)停止切換圖片，離開后繼續(xù)切換圖片
3. 圖片點(diǎn)擊上一張下一張時(shí)自動(dòng)切換，并自我進(jìn)行判斷是否為第一張或最后一張。
當(dāng)圖片為第一張時(shí)，點(diǎn)擊上一張到最后一張圖片，當(dāng)圖片為最后一張時(shí)，點(diǎn)擊下一張到第一張。

HTML結(jié)構(gòu)（毫無美感的html，畢竟就一個(gè)demo嘛）

JavaScript代碼

/*
 * 1.使用定時(shí)器定時(shí)切換圖片輪播效果
 * 2.鼠標(biāo)停留在圖片上時(shí)停止切換圖片，離開后繼續(xù)切換圖片
 * 3.圖片點(diǎn)擊上一張下一張時(shí)自動(dòng)切換，并自我進(jìn)行判斷是否為第一張或最后一張。
 *   當(dāng)圖片為第一張時(shí)，點(diǎn)擊上一張到最后一張圖片，當(dāng)圖片為最后一張時(shí)，點(diǎn)擊下一張到第一張。
 * 
 * onmouseover 事件會(huì)在鼠標(biāo)指針移動(dòng)到指定的對(duì)象上時(shí)發(fā)生。
 * onmouseout 事件會(huì)在鼠標(biāo)指針移出指定的對(duì)象時(shí)發(fā)生。
 * */

// 將所有圖片url放入一個(gè)數(shù)組，將index的值設(shè)置為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]);
    }
}
/*
 * 定義兩個(gè)全局變量stopValue 和startValue 為0，
 * onmouseover和onmouseout從進(jìn)入對(duì)應(yīng)的元素范圍到離開對(duì)應(yīng)的元素范圍會(huì)執(zhí)行很多次，
 * 通過兩個(gè)全局全局變量，讓它不管在對(duì)應(yīng)的元素范圍內(nèi)如何移動(dòng)都只執(zhí)行一次，
 * 避免setInterval時(shí)間出錯(cuò)。
 * */
function stop(){ // 進(jìn)入圖片時(shí)停止輪播
    stopValue+=1;
    if (stopValue < 2) {
        clear();
        startValue = 0;
    }
}
function start(){ // 離開圖片時(shí)繼續(xù)輪播
    startValue+=1;
    if (startValue < 2) {
        setInt();
        stopValue = 0;
    }
}
function clear(){ // 清除定時(shí)器
    clearInterval(int);
}
function setInt(){ // 重新執(zhí)行定時(shí)器
    int = setInterval("carousel()", 3000);
}
/*
 * 在切換圖片時(shí)也調(diào)用了shop()和start()方法
 * 目的時(shí)為了解除在輪播過程中，在即將切換圖片時(shí)，手動(dòng)切換圖片了卻又立馬進(jìn)入到下一張圖片
 * */
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);

噢對(duì)了，這次滴文章參考了這位大大的文章，嘻嘻該承認(rèn)還是得承認(rèn)，誰讓我還是一個(gè)孩子呢
貌似這距離實(shí)用的輪播效果不遠(yuǎn)了呀，但肯定還有很多缺點(diǎn)，望大家指出~~~
我滴媽呀，可能加個(gè)css過渡效果可能會(huì)順眼很多，可誰讓我css渣呢，不說了去進(jìn)修先~~~