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

pkhope 發布于2019-08-23 14:02 / 1432人閱讀

摘要：結構毫無美感的，畢竟就一個嘛上一張下一張代碼使用定時器定時切換圖片輪播效果鼠標停留在圖片上時停止切換圖片，離開后繼續切換圖片圖片點擊上一張下一張時自動切換，并自我進行判斷是否為第一張或最后一張。

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

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

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

JavaScript代碼

/*
 * 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渣呢，不說了去進修先~~~

云服務器 GPU云服務器原生JS實現輪播原生js橫向輪播旋轉原生js效果原生javascript

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99976.html

手把手教你用原生JavaScript造輪子（2）——輪播圖（更新：ES6版本）

摘要：綁定輪播事件然后是鼠標移入移出事件的綁定鼠標移入移出事件移入時停止輪播播放的定時器，移出后自動開始下一張的播放。通過上一篇文章的學習，我們基本掌握了一個輪子的封裝和開發流程。那么這次將帶大家開發一個更有難度的項目——輪播圖，希望能進一步加深大家對于面向對象插件開發的理解和認識。 So, Lets begin! 目前項目使用 ES5及UMD 規范封裝，所以在前端暫時只支持標簽的引入方式...

jasperyang 2019-08-23 10:57 評論0 收藏0
回顧自己三次失敗的面試經歷

摘要：站在這個時間點上，我對自己之前三次失敗的面試經歷做了一次深度回顧。關于我第三次面試失敗的經歷，依然是與輪播圖有關。當然，這次思特奇面試之旅，最后也是以失敗告終，這也是我離進大廠最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言時間的齒輪已經來到了2017年的11月份，距離2018年僅僅還剩下不到兩...

DC_er 2019-08-21 17:42 評論0 收藏0
回顧自己三次失敗的面試經歷

摘要：站在這個時間點上，我對自己之前三次失敗的面試經歷做了一次深度回顧。關于我第三次面試失敗的經歷，依然是與輪播圖有關。當然，這次思特奇面試之旅，最后也是以失敗告終，這也是我離進大廠最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言時間的齒輪已經來到了2017年的11月份，距離2018年僅僅還剩下不到兩...

spacewander 2019-08-29 13:50 評論0 收藏0
授人以漁式解析原生JS寫輪播圖

摘要：鼠標放到輪播圖的圖片上時不再自動輪播并且左右箭頭顯示出來，鼠標移開時左右箭頭隱藏掉并且自動輪播。核心原理清除定時器，綁定事件，重構下代碼封裝出往右往左輪播函數和自動輪播函數。需求與分析需求：循環無縫自動輪播五張圖，按左右箭頭可以手動切換圖片，鼠標點擊輪播圖下面按鈕 1 2 3 4 5會跳轉到對應的第1 2 3 4 5張圖片。鼠標放到輪播圖的圖片上時不再自動輪播并且左右箭頭顯示出來，...

Zack 2019-08-29 16:58 評論0 收藏0