用多了各種組件庫的你還會用原生JS寫輪播圖嗎？

近工作學習時間很忙，好久沒有更新頭條文章了，利用今天周日，使用原生的JavaScript寫了一個漸隱漸現的輪播，算是對最近的前端學習的一個小總結吧。下面我來分享一下我寫這個功能的步驟以及經驗總結。

一、功能說明

1.1 功能介紹

實現一個漸隱漸現的輪播圖；
可以自動切換，也可以鼠標點擊翻頁按鈕或者小圓點進行切換；
同時鼠標移動到圖片上停止自動切換，鼠標移出圖片恢復自動切換。

1.2 效果圖如下

漸隱漸現輪播圖效果

二、HTML和CSS結構

圖片容器：這里我放了4張美女圖，為啥用這個，因為養眼。（手動滑稽）
分頁容器：就是那幾個小圓點，可以切換每一張圖片。
翻頁按鈕：輪播圖左右兩邊的按鈕，也可以切換圖片。

HTML代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生JS寫一個漸隱漸現輪播圖</title>
    <link rel="stylesheet" href="slider.css">
</head>
<body>
    <div class="container">
        <!-- 1. 輪播圖片組 -->
        <div class="imgs">
            <a href="" class="slider"><img src="./images/1.jpg" class="active" /></a>
            <a href="" class="slider"><img src="./images/2.jpg" /></a>
            <a href="" class="slider"><img src="./images/3.jpg" /></a>
            <a href="" class="slider"><img src="./images/4.jpg" /></a>
        </div>
        <!-- 2. 小圓點按鈕 -->
        <div class="paginations"></div>
        <!-- 3. 翻頁按鈕 -->
        <div class="skip">
            <a href="#" class="prev"><</a>
            <a href="#" class="next">></a>
        </div>
    </div>
    <script src="slider.js"></script>
</body>
</html>

CSS代碼

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 10px;
}

a {
    text-decoration: none;
}

/* 輪播圖的容器 */
.container {
    width: 75em;
    height: 42rem;
    margin: 1em auto;
    position: relative;
    overflow: hidden;
}

/* 輪播圖片組 */
.container .imgs {
    width: 75rem;
    height: 42rem;
    overflow: hidden;
}

.container .imgs a {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    z-index: 0;
    transition: all .6s;
}

.container .imgs a img {
    width: 100%;
    height: 100%;
}

/* 設置默認顯示的圖片(第一張) */
.container>.imgs a:nth-of-type(1) {
    opacity: 1;
    z-index: 1;
}
.container>.paginations {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1rem;
    /* 水平居中 */
    text-align: center;
    z-index: 99;
}

.container>.paginations a {
    /* 轉成行內塊元素: 即能水平排列,雙支持寬度設置 */
    display: inline-block;
    padding: .8rem;
    margin: 0 0.5em;
    background-color: #fff;
    border-radius: 50%;
    transition: all .5s;
}

.container>.paginations a.active {
    background-color: #000;
}

/* 翻頁按鈕 */
.container .skip a {
    position: absolute;
    z-index: 99;
    width: 2.5rem;
    height: 5rem;
    line-height: 5rem;
    text-align: center;
    opacity: 0.5;
    top: 50%;
    margin-top: -2.5rem;
    font-size: 2rem;
    background-color: #ccc;
    transition: all .6s;
}

.container .skip .prev {
    left: 0;
}

.container .skip .next {
    right: 0;
}

.container .skip *:hover {
    opacity: 0.9;
    color: #666;   
}

目前頁面的基礎效果都已經完成了，效果是這樣的：

輪播圖默認效果

三、JavaScript代碼

首先，在做我們的輪播效果之前，我們需要先拿到相關的元素。

// 獲取相關容器元素
// 輪播圖容器
const container=document.querySelector('.container');
// 圖片容器
const imgs=document.querySelector('.imgs');
// 每一張圖片元素
const sliderLists=document.querySelectorAll('.slider');
// 小圓點容器元素
const paginations=document.querySelector('.paginations');
// 上翻頁按鈕
const prevBtn=document.querySelector('.prev');
// 下翻頁按鈕
const nextBtn=document.querySelector('.next');

至于分頁小圓點按鈕，我個人認為應該根據輪播圖片的數量去動態生成它，因此我是這樣寫的：

// 創建分頁小圓點，首先創建文檔片段
let frag=document.createDocumentFragment();
for (let i=0; i < sliderLists.length; i++) {
    const a=document.createElement('a');
    a.href='javascript：;';
    a.class='btn';
    frag.appendChild(a);
}
// 將生成的文檔碎片掛載到paginations下
paginations.appendChild(frag);
// 為第一個分頁圓點添加默認樣式
paginations.firstElementChild.classList.add('active');

分頁圓點元素渲染出來之后，先拿到它所有的元素以備后面做點擊切換圖片的事件使用。

let paginationBtns=document.querySelectorAll('.paginations a');

3.1 實現自動輪播的效果

由于我做的是漸隱漸現的效果，所以需要控制元素的z-index和opacity兩個屬性的值即可。

實現原理是：哪張圖片顯示，就把該元素的z-index和opacity值都設置成1，把需要隱藏的元素的z-index和opacity值都設置成0即可。這時，就需要兩個值來記錄當前圖片的位置，和上一張圖片的位置。至于自動切換效果，我是利用定時器實現的。

代碼實現

// prev 上一張圖片的位置，curr 當前圖片的位置。默認顯示第一張圖片。
let prev=0, curr=0;
// 自動切換圖片，由于此方法后面還需要再次使用，這里我就封裝成了一個函數。
let autoSwitchImg=function () {
    // 記錄上一張圖片的索引值，默認從0開始，即：第一張圖片
    prev=curr;
    // 上一張圖片的索引自增1，就是下一張要顯示的圖片，即當前圖片。
    curr++;
    // 判斷當前的索引值是不是大于圖片的總數，大于的話就從0開始，即第一張圖片開始輪播，
    // 否則繼續向下一張圖片切換。
    curr=curr >=sliderLists.length ? 0 : curr;
    switchImg();
};
// 利用定時器設置自動輪播，這里我默認的是3s自動切換。
let interval=setInterval(autoSwitchImg, 3000);

這里有一點需要注意的是：自動切換函數autoSwitchImg()一定在寫在定時器之前，否則會報錯。

代碼寫到這里已經完成了自動切換的效果了。但是會發現有個問題，就是分頁小圓點不會跟隨著圖片進行切換，那是因為我還沒實現它的邏輯。現在開始實現這個分頁按鈕跟隨對應的圖片進行切換的邏輯。

分頁圓點bug

分頁小圓點的實現原理是：我們先利用上面拿到的小圓點元素，用forEach()去遍歷每一個元素，如果當前圖片的位置索引等于小圓點的位置索引（curr===index），那么就給這個圓點添加上一個active類實現切換效果。值得注意的是，我們拿到的小圓點的元素是一個NodeList類數組，需要先轉換成數組再使用。具體請看下面的代碼實現。

代碼實現

// 讓分頁按鈕跟圖片索引對應
let switchPaginateBtn=function () {
    Array.from(paginationBtns).forEach((item, index)=> {
        curr===index ? item.className='active' : item.className='';
    });
};

這樣就可以實現圖片和圓點切換一致地進行了。

以上是自動切換圖片的功能，如果我們想實現鼠標移入輪播海報上停止自動切換，鼠標移除再恢復自動切換應該怎么辦呢？可以利用鼠標移入(onmouseenter)、移出(onmouseleave)事件進行操作。

代碼實現

// 鼠標移入輪播區域取消自動輪播
container.addEventListener('mouseenter', ()=> {
    clearInterval(interval);
    interval=null;
});
// 鼠標移出輪播區域開始自動輪播
container.addEventListener('mouseleave', ()=> {
    interval=setInterval(autoSwitchImg, 3000);
});

截止到目前為止，上面的代碼已經實現了圖片的漸隱漸現效果，以及鼠標滑入滑出暫停和恢復切換的效果。下面需要做的就是實現手動點擊切換事件。

3.2 點擊翻頁按鈕實現切換效果

上一頁翻頁按鈕與自動切換圖片的邏輯剛好相反，拿到當前圖片的索引，減去1就是上一張圖片的索引，也就是要切換到當前圖片的索引值。

// 上一頁
prevBtn.addEventListener('click', ()=> {
    // 保存當前圖片的索引
    prev=curr;
    // 上一張圖片就是當前圖片的索引值-1
    curr--;
    curr=curr < 0 ? sliderLists.length - 1 : curr;
    switchImg();
});

下一頁翻頁按鈕與自動切換圖片的邏輯完全一樣，只需要調用一下自動切換的邏輯即可

// 下一頁
nextBtn.addEventListener('click', ()=> {
    autoSwitchImg();
});

通過給翻頁按鈕添加以上兩個點擊事件，已經完成了點擊切換圖片的功能了，下面再聊一聊如何通過點擊分頁小圓點切換圖片的功能。

3.3 點擊分頁小圓點切換圖片

實現原理：通過給每個小圓點添加一個點擊事件，通過判斷當前點擊的小圓點的位置索引，切換到對應的圖片即可。

代碼實現

// 點擊分頁小圓點切換圖片
Array.from(paginationBtns).forEach((item, index)=> {
    item.addEventListener('click', ()=> {
        // 保存當前圖片的位置索引
        prev=curr;
        // 將當前點擊的小圓點的位置索引值賦值給的需要顯示的圖片變量
        curr=index;
        // 調用切換圖片函數，實現切換效果
        switchImg();
    });
});

以上就是我寫這個漸隱漸現輪播圖的全部過程，如果有寫得不好的地方，請各位大佬批評指正，如果有跟我一樣的初學者想看完整代碼的同學，可以關注私信我并回復“輪播”獲取源碼。

天貓商城的建立，開啟了互聯網的競相發展，之后京東，蘇寧，唯品會等等也群雄并起，給我們這個時代注入了更多的新名詞，如：電子商務，網購，網店，快遞，物流等等。

隨著電子商務的蓬勃發展催生了各種各樣的工作崗位：運營，推廣，活動策劃，設計，美工，攝影，客服，物流等。然而，這個時代，他們都要以銷售為目的而開展工作。

很有幸，遇上了自己喜歡的事情，也從當初的小白變成了小油條了，有幸遇上了天貓店鋪的強大輪播功能！曾經很瘋狂為之迷醉。

一個輪播代碼盡然能創造出如此多的特效和功能，在此，我寫這些文章的初衷是給予那些想要在這方面有所進步的愛好者看的，也許我的看法存在一定的水平，如果有大神，還望請多指教更正。

好了，開頭的話就不多說，現在正式進入正題。

天貓店鋪的輪播代碼究竟是怎樣的代碼呢？代碼有很多種，比如：C++，PHP，JAVA，CSS等等，我具體要講的就是CSS和html，另外可能會附帶些Javascript，由于本人是自學的，所以只學了點CSS和html的皮毛，雖然是皮毛，但希望多少能給你們想學的，正在學的后來人一點幫助，讓你們少走點彎路，如果想學這些，就要盡早下定決心，如果想放棄，可以盡早，說句題外話，從事代碼工作的，確實跟學醫一樣，要學的東西很多，不過道路也是很艱辛的，尤其不是科班出身的。

好了，話題扯遠了，言歸正傳。

如今，天貓和淘寶店鋪的代碼已經很成熟了，曾經的PC端是那么如火如荼，如今手機端的興起，更是襯托了PC端已經不那么重要，雖然如此，PC端仍然有借鑒和參考的用途。從事過美工設計的同行們也許都知道，要裝修網店，必須多多少少知道點HTML，甚至CSS，在最初的時候，美工設計們切圖的方式還是以tr,td表格的形式出現，如今更多是以DIV和li標簽的出現，學過一點HTML的都知道，他們是網頁語言的標簽，是成對出現的。即<div></div><li></li>等。

天貓和淘寶輪播代碼由設計師支配自由書寫的地方有兩大組成部分，就是CSS和HTML(前提是店鋪購買了CSS權限，在天貓和淘寶是需要花錢購買的，這一點不同于京東和蘇寧，后兩者是免費的)，一般大的店鋪都有購買，比如：韓都衣舍，天之眼等等。天貓的輪播圖片代碼一般都是由焦點大圖，箭頭，輪播序號或者小焦點組成。例如：

3張1920PX寬的大海報，左右箭頭，三個小焦點

</li>

</li>

</li>

</li>

</ul>

</div>

</ul> //控制圖片最下方的四個小點

</div>

一般輪播代碼的基本組成部分都是由關鍵的四部分組成：1.data-widget-type參數部分，這里的參數部分基本都是這幾個，'viewSize':[1920]指的是輪播的大小，disableBtnCls':'disable',表示按鈕不可用時的class值。還拿旋轉木馬來說吧，輪播兩側有2個翻頁的按鈕：prev和next，你一直按next，輪播到最后一張，已經沒有了，不能輪播了，這個時候的Class值，也就是disable的樣式，是按鈕變成灰色呢，還是按鈕變成其他的樣式呢？，這個disable是可以自由命名的。'effect':'fade'指的是輪播的方式是漸隱的方式，后面還會有以X軸和Y軸移動的方式，這個參數不多說，以后還會遇到。2.<ul class="myksc-content"> 控制banner圖，也就是海報的輪播內容的，3.class="myshb-nav"控制數量的小焦點或者小焦點圖，4.class="prev disable" 和class="next"是控制上一張和下一張的箭頭。無論各式各樣的輪播圖組合，最基本的四點是必不可少的（另外其他不在設計師控制的<head>部分的除外，包括控制大小，位置的CSS和JavaScript）。

這就是最初天貓淘寶給商家最初的輪播樣式，后來越來越多的網頁設計師，前端設計師，店鋪模板設計師涌入這個行業，就衍生出了好多風格各異的輪播圖和多個輪播組合，我將會在下一期中再來慢慢介紹，介紹天貓利用Widget庫能夠變化出多少輪播特效代碼出來。

（圖片來自于互聯網，僅供做學習交流使用，不做商業用途，版權歸屬圖片版權方）