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

近工作學(xué)習(xí)時(shí)間很忙，好久沒有更新頭條文章了，利用今天周日，使用原生的JavaScript寫了一個(gè)漸隱漸現(xiàn)的輪播，算是對最近的前端學(xué)習(xí)的一個(gè)小總結(jié)吧。下面我來分享一下我寫這個(gè)功能的步驟以及經(jīng)驗(yàn)總結(jié)。

一、功能說明

1.1 功能介紹

實(shí)現(xiàn)一個(gè)漸隱漸現(xiàn)的輪播圖；
可以自動(dòng)切換，也可以鼠標(biāo)點(diǎn)擊翻頁按鈕或者小圓點(diǎn)進(jìn)行切換；
同時(shí)鼠標(biāo)移動(dòng)到圖片上停止自動(dòng)切換，鼠標(biāo)移出圖片恢復(fù)自動(dòng)切換。

1.2 效果圖如下

漸隱漸現(xiàn)輪播圖效果

二、HTML和CSS結(jié)構(gòu)

圖片容器：這里我放了4張美女圖，為啥用這個(gè)，因?yàn)轲B(yǎng)眼。（手動(dòng)滑稽）
分頁容器：就是那幾個(gè)小圓點(diǎn)，可以切換每一張圖片。
翻頁按鈕：輪播圖左右兩邊的按鈕，也可以切換圖片。

HTML代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生JS寫一個(gè)漸隱漸現(xiàn)輪播圖</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. 小圓點(diǎn)按鈕 -->
        <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%;
}

/* 設(shè)置默認(rèn)顯示的圖片(第一張) */
.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 {
    /* 轉(zhuǎn)成行內(nèi)塊元素: 即能水平排列,雙支持寬度設(shè)置 */
    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;   
}

目前頁面的基礎(chǔ)效果都已經(jīng)完成了，效果是這樣的：

輪播圖默認(rèn)效果

三、JavaScript代碼

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

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

至于分頁小圓點(diǎn)按鈕，我個(gè)人認(rèn)為應(yīng)該根據(jù)輪播圖片的數(shù)量去動(dòng)態(tài)生成它，因此我是這樣寫的：

// 創(chuàng)建分頁小圓點(diǎn)，首先創(chuàng)建文檔片段
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);
// 為第一個(gè)分頁圓點(diǎn)添加默認(rèn)樣式
paginations.firstElementChild.classList.add('active');

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

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

3.1 實(shí)現(xiàn)自動(dòng)輪播的效果

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

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

代碼實(shí)現(xiàn)

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

這里有一點(diǎn)需要注意的是：自動(dòng)切換函數(shù)autoSwitchImg()一定在寫在定時(shí)器之前，否則會報(bào)錯(cuò)。

代碼寫到這里已經(jīng)完成了自動(dòng)切換的效果了。但是會發(fā)現(xiàn)有個(gè)問題，就是分頁小圓點(diǎn)不會跟隨著圖片進(jìn)行切換，那是因?yàn)槲疫€沒實(shí)現(xiàn)它的邏輯。現(xiàn)在開始實(shí)現(xiàn)這個(gè)分頁按鈕跟隨對應(yīng)的圖片進(jìn)行切換的邏輯。

分頁圓點(diǎn)bug

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

代碼實(shí)現(xiàn)

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

這樣就可以實(shí)現(xiàn)圖片和圓點(diǎn)切換一致地進(jìn)行了。

以上是自動(dòng)切換圖片的功能，如果我們想實(shí)現(xiàn)鼠標(biāo)移入輪播海報(bào)上停止自動(dòng)切換，鼠標(biāo)移除再恢復(fù)自動(dòng)切換應(yīng)該怎么辦呢？可以利用鼠標(biāo)移入(onmouseenter)、移出(onmouseleave)事件進(jìn)行操作。

代碼實(shí)現(xiàn)

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

截止到目前為止，上面的代碼已經(jīng)實(shí)現(xiàn)了圖片的漸隱漸現(xiàn)效果，以及鼠標(biāo)滑入滑出暫停和恢復(fù)切換的效果。下面需要做的就是實(shí)現(xiàn)手動(dòng)點(diǎn)擊切換事件。

3.2 點(diǎn)擊翻頁按鈕實(shí)現(xiàn)切換效果

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

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

下一頁翻頁按鈕與自動(dòng)切換圖片的邏輯完全一樣，只需要調(diào)用一下自動(dòng)切換的邏輯即可

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

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

3.3 點(diǎn)擊分頁小圓點(diǎn)切換圖片

實(shí)現(xiàn)原理：通過給每個(gè)小圓點(diǎn)添加一個(gè)點(diǎn)擊事件，通過判斷當(dāng)前點(diǎn)擊的小圓點(diǎn)的位置索引，切換到對應(yīng)的圖片即可。

代碼實(shí)現(xiàn)

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

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

天貓商城的建立，開啟了互聯(lián)網(wǎng)的競相發(fā)展，之后京東，蘇寧，唯品會等等也群雄并起，給我們這個(gè)時(shí)代注入了更多的新名詞，如：電子商務(wù)，網(wǎng)購，網(wǎng)店，快遞，物流等等。

隨著電子商務(wù)的蓬勃發(fā)展催生了各種各樣的工作崗位：運(yùn)營，推廣，活動(dòng)策劃，設(shè)計(jì)，美工，攝影，客服，物流等。然而，這個(gè)時(shí)代，他們都要以銷售為目的而開展工作。

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

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

好了，開頭的話就不多說，現(xiàn)在正式進(jìn)入正題。

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

好了，話題扯遠(yuǎn)了，言歸正傳。

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

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

3張1920PX寬的大海報(bào)，左右箭頭，三個(gè)小焦點(diǎn)

</li>

</li>

</li>

</li>

</ul>

</div>

</ul> //控制圖片最下方的四個(gè)小點(diǎn)

</div>

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

這就是最初天貓?zhí)詫毥o商家最初的輪播樣式，后來越來越多的網(wǎng)頁設(shè)計(jì)師，前端設(shè)計(jì)師，店鋪模板設(shè)計(jì)師涌入這個(gè)行業(yè)，就衍生出了好多風(fēng)格各異的輪播圖和多個(gè)輪播組合，我將會在下一期中再來慢慢介紹，介紹天貓利用Widget庫能夠變化出多少輪播特效代碼出來。

（圖片來自于互聯(lián)網(wǎng)，僅供做學(xué)習(xí)交流使用，不做商業(yè)用途，版權(quán)歸屬圖片版權(quán)方）

訊視頻

某某藝視頻

某酷視頻

某果tv

在線咨詢

上一篇：bat腳本執(zhí)行中文亂碼怎么辦？這里教你怎么解決
下一篇：百度地圖API圖標(biāo)、文本、圖例與連線

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

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

一、功能說明

二、HTML和CSS結(jié)構(gòu)

三、JavaScript代碼

3.1 實(shí)現(xiàn)自動(dòng)輪播的效果

3.2 點(diǎn)擊翻頁按鈕實(shí)現(xiàn)切換效果

3.3 點(diǎn)擊分頁小圓點(diǎn)切換圖片

您的項(xiàng)目需求

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

一、功能說明

二、HTML和CSS結(jié)構(gòu)