手把手和你用原生JS寫(xiě)一個(gè)循環(huán)播放圖片輪播

enda 發(fā)布于2019-08-20 17:07 / 3717人閱讀

摘要：前段時(shí)間學(xué)習(xí)了淘寶首頁(yè)的靜態(tài)頁(yè)面，其中收獲較大的的就是這個(gè)循環(huán)播放的圖片輪播組件，本文就將相關(guān)制作經(jīng)驗(yàn)分享給大家。作為演示，用標(biāo)簽代替了圖片。關(guān)鍵使用不同背景色的替代圖片。

前段時(shí)間學(xué)習(xí)了淘寶首頁(yè)的靜態(tài)頁(yè)面，其中收獲較大的的就是這個(gè)循環(huán)播放的圖片輪播組件，本文就將相關(guān)制作經(jīng)驗(yàn)分享給大家。

先看看在線DEMO：原生JS循環(huán)播放圖片輪播組件?（支持IE8+，本文中的在線demo均未經(jīng)過(guò)壓縮，可以直接在瀏覽器中調(diào)試）

以及GitHub倉(cāng)庫(kù)地址及完整代碼：JuniorTour/simple-standard-js-carousel

一、思路講解: 1.先說(shuō)基本的非循環(huán)無(wú)過(guò)渡圖片輪播：

這個(gè)思路還是很簡(jiǎn)單的，通過(guò)觀察一些圖片輪播就可以發(fā)現(xiàn)，圖片輪播一般是以一個(gè)尺寸較小的父元素作為窗口，包裹住一組較長(zhǎng)的長(zhǎng)條狀的項(xiàng)目（item）子元素，再利用?overflow: hidden; ，將父元素作為“窗口”，只顯示出的項(xiàng)目子元素的一部分，并通過(guò)改變項(xiàng)目子元素的定位或translate3d屬性，實(shí)現(xiàn)多張圖片項(xiàng)目動(dòng)態(tài)播放。

基本原理可以參考這個(gè)demo：圖片輪播基本原理演示

2.比較有意思的其實(shí)是循環(huán)的功能：

但是這樣簡(jiǎn)單的輪播是不會(huì)循環(huán)播放的，也就是說(shuō)當(dāng)一輪圖片項(xiàng)目（item）播放到結(jié)尾；或者當(dāng)在第一張圖（第一個(gè)項(xiàng)目）繼續(xù)向前時(shí)，就會(huì)超出內(nèi)容子元素，出現(xiàn)空白部分，這一般不是我們想要的結(jié)果。

有多種思路可以實(shí)現(xiàn)循環(huán)播放，我觀察到淘寶網(wǎng)首頁(yè)的圖片輪播是這樣的思路：

復(fù)制開(kāi)頭和結(jié)尾的項(xiàng)目，并分別放在開(kāi)頭和結(jié)尾，當(dāng)播放到開(kāi)頭或結(jié)尾的項(xiàng)目，繼續(xù)播放，需要循環(huán)時(shí)，臨時(shí)取消transition屬性，并立即用定位跳轉(zhuǎn)至相應(yīng)的真正的開(kāi)頭或結(jié)尾之后，再恢復(fù)原來(lái)的transition，繼續(xù)正常滾動(dòng)播放，從而利用視覺(jué)上的“欺騙”，實(shí)現(xiàn)帶有過(guò)渡效果的循環(huán)播放。

相應(yīng)的原理可以參考這個(gè)demo：圖片輪播循環(huán)原理演示

二、HTML標(biāo)記部分

核心理念是簡(jiǎn)潔、語(yǔ)義化。這部分因?yàn)槲覍W(xué)過(guò)bootstrap框架所以借鑒了bootstrap的HTML標(biāo)記結(jié)構(gòu)。

整體結(jié)構(gòu)為：

外層的.carousel-wrapper包裹著輪播的三個(gè)主要部分，分別是：

.carousel-item-wrapper：項(xiàng)目?jī)?nèi)容部分（作為演示，本文中的demo使用a標(biāo)簽代替了圖片，大家可以自行嘗試替換為圖片；同時(shí)添加了文字序號(hào)標(biāo)記，以便于觀察理解，尤其要注意兩個(gè)復(fù)制的開(kāi)頭和結(jié)尾項(xiàng)目copy-1和copy-5）。

.carousel-control-wrapper：控制按鈕部分，即兩個(gè)用于控制左右移動(dòng)的按鈕。

.carousel-index-wrapper：索引按鈕部分，即圖片輪播中的那一排“小圓點(diǎn)”。為了便于用JS操控，我添加了id作為“鉤子”。而bootstrap在這里用的是自定義的data屬性。


    
        
            
                
                
            
            
                copy-5
            
        
        
            
                
            
            
                1
            
        
        
            
                
            
            
                2
            
        
        
            
                
            
            
                3
            
        
        
            
                
            
            
                4
            
        
        
            
                
            
            
                5
            
        
        
            
                
            
            
                copy-1
            
        
    
    
        
        
    
    
        
            carousel-index-1
            carousel-index-2
            carousel-index-3
            carousel-index-4
            carousel-index-5

三、CSS樣式部分

總的來(lái)說(shuō)比較簡(jiǎn)單，重要的地方我加上了注釋，有存疑的地方，歡迎和我交流。

    /*reset*/
    * {
        border: none;
        padding: 0;
        margin: 0;
    }
    button {
        outline: none;
    }
    li {
        list-style: none;
    }

    .carousel-wrapper {
        width:520px;
        height:280px;
        overflow: hidden;   /*關(guān)鍵*/
        position: relative;
        margin: 100px auto;
    }
    .carousel-item-wrapper {
        width:3640px;
        height:280px;
        position: absolute;
        top: 0;
        left: -520px;
        transition: left .2s ease-in;
    }
    .carousel-item a {
        display: block;
        background-color: red;
        width:520px;
        height: 280px;
    }

    /*使用不同背景色的a替代圖片。*/
    .carousel-item:nth-child(1) a {
        background-color: rgb(129,194,214);
        /*第五張圖片的復(fù)制*/
    }
    .carousel-item:nth-child(2) a {
        background-color: rgb(129,146,214);
    }
    .carousel-item:nth-child(3) a {
        background-color: rgb(217,179,230);
    }
    .carousel-item:nth-child(4) a {
        background-color: rgb(220,247,161);
    }
    .carousel-item:nth-child(5) a {
        background-color: rgb(131,252,216);
    }
    .carousel-item:nth-child(6) a {
        background-color: rgb(129,194,214);
    }
    .carousel-item:nth-child(7) a {
        background-color: rgb(129,146,214);
        /*第一張圖片的復(fù)制*/
    }

    .carousel-item {
        float: left;
    }
    .carousel-index-mark {
        font-size:60px;
        color: black;
        position: absolute;
        top: 0;
    }
    .carousel-control-wrapper {
        transition: all .2s;
    }
    .carousel-wrapper:hover button {
        display: block;
    }
    .carousel-control-wrapper button {
        transition: all .2s linear;
        display: none;
        width:24px;
        height:36px;
        line-height:36px;
        background-color: rgba(0,0,0,.3);
        color: #fff;
        position: absolute;
        top: 50%;
        cursor: pointer;
    }
    button#prev {
        left:0;
    }
    button#next {
        right:0;
    }
    button i {
        font-size: 18px;
    }
    .carousel-index-wrapper {
        width:65px;
        height:13px;
        overflow: hidden;
        position: absolute;
        bottom:15px;
        left:50%;
        margin-left: -33px;
    }
    .carousel-index-btn {
        width:9px;
        height:9px;
        float: left;
        margin:2px;
        background-color: #b7b7b7;
        border-radius: 50%;
        text-indent: -999em;
        /*這個(gè)-999em的文字對(duì)齊聲明有助于增強(qiáng)可訪問(wèn)性。*/
        cursor: pointer;
    }
    .active-carousel-index-btn {
        background-color: #f44103;
    }

四、JS部分

這一塊是主要部分，內(nèi)容較多，因此我們逐步來(lái)實(shí)現(xiàn)各部分功能以便于理解。

0.功能和結(jié)構(gòu)分析：

根據(jù)最開(kāi)始的思路講解，我們把這個(gè)輪播的JavaScript功能大致分為以下4個(gè)部分：
1.左右滑動(dòng)按鈕功能
2.索引按鈕跳轉(zhuǎn)功能
3.自動(dòng)播放功能
4.循環(huán)播放功能。

我們來(lái)分別逐步實(shí)現(xiàn)。

1.實(shí)現(xiàn)左右滑動(dòng)按鈕功能：

function addLoadEvent(func) {
    var oldLoad = window.onload;
    if (typeof oldLoad != "function") {
        window.onload = func;
    } else {
        window.onload = function () {
            oldLoad();
            func();
        }
    }
}
//給文檔加載完成后的load事件綁定相應(yīng)的處理函數(shù)：
addLoadEvent(preventDefaultAnchors);
addLoadEvent(carouselControl);

/*用一個(gè)對(duì)象把輪播組件的相關(guān)參數(shù)封裝起來(lái)，優(yōu)點(diǎn)是靈活便于擴(kuò)展升級(jí)；缺點(diǎn)是同時(shí)也增加了文件的體積。*/
var carouselInfo = {
    itemWidth: 520,
    trueItemNum: 5,
    itemNum: 7,
    totalWidth: 7 * 520
};

//阻止a標(biāo)簽?zāi)J(rèn)的點(diǎn)擊跳轉(zhuǎn)行為
function preventDefaultAnchors() {
    var allAnchors = document.querySelectorAll("a");

    for (var i = 0; i < allAnchors.length; i++) {
        allAnchors[i].addEventListener("click", function (e) {
            e.preventDefault();
        }, false);
    }
}

function carouselControl () {
    var prev = document.querySelector("#prev");
    var next = document.querySelector("#next");
    var carouselWrapper = document.querySelector(".carousel-wrapper");

    prev.onclick = function () {
        slide(-1);
    };
    next.onclick = function () {
        slide(1);
    };
}

function slide(slideItemNum) {
    var itemWrapper=document.querySelector(".carousel-item-wrapper");
    var currentLeftOffset=(itemWrapper.style.left)?parseInt(itemWrapper.style.left): 0,
        targetLeftOffset=currentLeftOffset-(slideItemNum*carouselInfo.itemWidth);

    itemWrapper.style.left=targetLeftOffset+"px";
}

第1步的demo：carousel-step-1

2.實(shí)現(xiàn)索引按鈕跳轉(zhuǎn)功能：

function carouselControl() {
    var prev = document.querySelector("#prev");
    var next = document.querySelector("#next");
    var carouselWrapper = document.querySelector(".carousel-wrapper");
    //添加索引按鈕的引用
    var indexBtns = document.querySelectorAll(".carousel-index-btn");

    //標(biāo)記當(dāng)前所在的圖片編號(hào)，用于配合控制.index-btn。
    var currentItemNum = 1;
    prev.onclick = function () {
        //把滑動(dòng)功能和切換索引按鈕功能裝入一個(gè)函數(shù)之中，以便于獲取當(dāng)前索引：
        currentItemNum=prevItem(currentItemNum);
    };
    next.onclick = function () {
        //把滑動(dòng)功能和切換索引按鈕功能裝入一個(gè)函數(shù)之中，以便于獲取當(dāng)前索引：
        currentItemNum=nextItem(currentItemNum);
    };

    for (var i = 0; i < indexBtns.length; i++) {
        //利用立即調(diào)用函數(shù)，解決閉包的副作用，傳入相應(yīng)的index值
        (function (i) {
            indexBtns[i].onclick = function () {
                slideTo(i+1);
                currentItemNum=i+1;
            }
        })(i);
    }
}

function nextItem(currentItemNum) {
    slide(1);
    currentItemNum += 1;
    if (currentItemNum == 6) currentItemNum = 1;
    switchIndexBtn(currentItemNum);

    return currentItemNum;
}

function prevItem(currentItemNum) {
    slide(-1);
    currentItemNum -= 1;
    if (currentItemNum == 0) currentItemNum = 5;
    switchIndexBtn(currentItemNum);

    return currentItemNum;
}

//添加直接跳轉(zhuǎn)函數(shù)：
function slideTo(targetNum) {
    var itemWrapper=document.querySelector(".carousel-item-wrapper");
    itemWrapper.style.left=-(targetNum*carouselInfo.itemWidth)+"px";
    switchIndexBtn(targetNum);
}

function slide(slideItemNum) {
    var itemWrapper = document.querySelector(".carousel-item-wrapper");
    var currentLeftOffset = (itemWrapper.style.left) ? parseInt(itemWrapper.style.left) : 0,
        targetLeftOffset = currentLeftOffset - (slideItemNum * carouselInfo.itemWidth);

    itemWrapper.style.left = targetLeftOffset + "px";
}

function switchIndexBtn(targetNum) {
    //切換當(dāng)前的索引按鈕
    //刪除過(guò)去激活的.active-carousel-index-btn
    var activeBtn=document.querySelector(".active-carousel-index-btn");
    activeBtn.className=activeBtn.className.replace(" active-carousel-index-btn","");

    //添加新的激活索引按鈕
    var targetBtn=document.querySelectorAll(".carousel-index-btn")[targetNum-1];
    targetBtn.className+=" active-carousel-index-btn";
}

第2步的demo：carousel-step-2

3.實(shí)現(xiàn)自動(dòng)播放功能：

function carouselControl() {
    //省略前面重復(fù)的代碼......

    for (var i = 0; i < indexBtns.length; i++) {
        //利用立即調(diào)用函數(shù)，解決閉包的副作用，傳入相應(yīng)的index值
        (function (i) {
            indexBtns[i].onclick = function () {
                slideTo(i+1);
                currentItemNum=i+1;
            }
        })(i);
    }

    //添加定時(shí)器
    var scrollTimer;
    function play() {
        scrollTimer=setInterval(function () {
            currentItemNum=nextItem(currentItemNum);
        },2000);
    }
    play();

    function stop() {
        clearInterval(scrollTimer);
    }

    //綁定事件
    carouselWrapper.addEventListener("mouseover",stop);
    carouselWrapper.addEventListener("mouseout",play,false);

    /*DOM二級(jí)的addEventListener相對(duì)于on+sth的優(yōu)點(diǎn)是：
     * 1.addEventListener可以先后添加多個(gè)事件，同時(shí)這些事件還不會(huì)相互覆蓋。
     * 2.addEventListener可以控制事件觸發(fā)階段，通過(guò)第三個(gè)可選的useCapture參數(shù)選擇冒泡還是捕獲。
     * 3.addEventListener對(duì)任何DOM元素都有效，而不僅僅是HTML元素。*/
}

第3步的demo：carousel-step-3

4.關(guān)鍵點(diǎn)：實(shí)現(xiàn)循環(huán)播放功能：

function slide(slideItemNum) {
    var itemWrapper = document.querySelector(".carousel-item-wrapper");
    var currentLeftOffset = (itemWrapper.style.left) ? parseInt(itemWrapper.style.left) : 0,
        targetLeftOffset = currentLeftOffset - (slideItemNum * carouselInfo.itemWidth);

    /*不在這里跳轉(zhuǎn)了。先處理偏移值，實(shí)現(xiàn)循環(huán)，再跳轉(zhuǎn)。*/
    //itemWrapper.style.left = targetLeftOffset + "px";

    switch (true) {
            /*switch 的語(yǔ)法是：當(dāng)case之中的表達(dá)式等于switch (val)的val時(shí)，執(zhí)行后面的statement（語(yǔ)句）。*/
        case (targetLeftOffset>0):
            itemWrapper.style.transition="none";
            itemWrapper.style.left=-carouselInfo.trueItemNum*carouselInfo.itemWidth+"px";
            /*此處即相當(dāng)于：itemWrapper.style.left="-2600px";*/
            targetLeftOffset=-(carouselInfo.trueItemNum-1)*carouselInfo.itemWidth;
            //相當(dāng)于：targetLeftOffset=-2080;
            break;
        case (targetLeftOffset<-(carouselInfo.totalWidth-carouselInfo.itemWidth)):
            //此處即相當(dāng)于：targetLeftOffset<-3120
            itemWrapper.style.transition="none";
            itemWrapper.style.left=-carouselInfo.itemWidth+"px";
            //相當(dāng)于：itemWrapper.style.left="-520px";
            targetLeftOffset=-carouselInfo.itemWidth*2;
            //相當(dāng)于：targetLeftOffset=-1040;
            break;
    }

    /*這里我使用了setTimeout(fn,0)的hack
     * 參考bootstrap的carousel.js源碼，似乎也利用了setTimeout(fn,0)這一hack。
     *
     * stackoverflow上有對(duì)這一hack的討論和解釋：
     * http://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful
     * 根據(jù)第二個(gè)回答，我個(gè)人的理解是：setTimeout(fn,0)相當(dāng)于異步執(zhí)行內(nèi)部的代碼fn，
     * 具體到這個(gè)輪播，就是在上一輪非過(guò)渡定位的頁(yè)面渲染工作（switch語(yǔ)句內(nèi)部的case）結(jié)束之后，再執(zhí)行setTimeout內(nèi)部的過(guò)渡位移工作。
     * 從而避免了，非過(guò)渡的定位還未結(jié)束，就恢復(fù)了過(guò)渡屬性，使得這一次非過(guò)渡的定位也帶有過(guò)渡效果。
     **/

    //各位可以試一試，把setTimeout內(nèi)部的代碼放在外部，“循環(huán)”時(shí)會(huì)有什么樣的錯(cuò)誤效果。
    //itemWrapper.style.transition="left .2s ease-in";
    //itemWrapper.style.left=targetLeftOffset+"px";

    setTimeout(function () {
        itemWrapper.style.transition="left .2s ease-in";
        itemWrapper.style.left=targetLeftOffset+"px";
    },20);
}

第4步的demo：carousel-step-4

至此，就完成了一個(gè)完整的循環(huán)播放圖片輪播，欣賞一下自己的杰作吧~~~ヾ(??▽?)ノ

五、源碼及示例： 1.GitHub倉(cāng)庫(kù)地址及完整代碼：JuniorTour/simple-standard-js-carousel 2.在線demo：原生JS循環(huán)播放圖片輪播組件?

很慚愧，只做了一點(diǎn)簡(jiǎn)單的工作。如果覺(jué)得本文不錯(cuò)的話，歡迎給我的GitHub點(diǎn)贊！

云服務(wù)器 GPU云服務(wù)器原生JS實(shí)現(xiàn)輪播原生js橫向輪播旋轉(zhuǎn) js原生異步怎么寫(xiě) 原生js如何寫(xiě)動(dòng)畫(huà)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83417.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

enda

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow的softmax

閱讀 1872·2023-04-26 02:32
邊緣的興起—隨時(shí)隨地進(jìn)行分析和計(jì)算

閱讀 601·2021-11-18 13:12
LOCVPS：雙十一全場(chǎng)7折/部分5折，充300元送50元，日本vps，22.5元/月起，荷蘭vps

閱讀 2480·2021-10-20 13:48
Chrome 嘗試在 Android 上推出類似RSS的新網(wǎng)站訂閱功能

閱讀 2559·2021-10-14 09:43
【物聯(lián)網(wǎng)】7.物聯(lián)網(wǎng)通信 - 數(shù)據(jù)格式(XML ,JSON,MessagePack)

閱讀 3870·2021-10-11 10:58
寶塔Linux面板nginx防火墻免費(fèi)版和nginx防火墻收費(fèi)版的區(qū)別

閱讀 3595·2021-09-30 10:00
前端每日實(shí)戰(zhàn)：63# 視頻演示如何用純 CSS 創(chuàng)作一臺(tái)烤面包機(jī)

閱讀 2970·2019-08-30 15:53
JS基礎(chǔ)入門(mén)篇（二十七）—BOM

閱讀 3517·2019-08-30 15:53

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

手把手和你用原生JS寫(xiě)一個(gè)循環(huán)播放圖片輪播

相關(guān)文章