使用原生js以兩種方式製做一個精美的輪播圖(下)

時間 2019-11-07

標籤使用原生兩種方式製做一個精美欄目 JavaScript 简体版

原文原文鏈接

展現界面 & github源碼css

(這裏能夠實現PC端模擬移動端左右滑動圖片切換的效果)

github源碼（包含兩種方式實現輪播圖的源碼）
項目預覽

前言

如何用原生js實現一個簡單的輪播圖呢？前面我已經用一種方法實現了，可能有些小夥伴以爲那種方法寫的輪播圖有點low，不夠炫酷。那麼，那就請看看下面這種方法實現的輪播圖吧！
如今我就分享第二種使用原生js實現輪播圖的方法，這種方法制做輪播圖的原理主要是控制全部圖片的display從而控制圖片顯現的，爲none的所有隱藏，爲block顯現出來，再經過定時器(setInterval)函數來控制圖片達到輪播的效果。
這種方法是我在查閱資料的時候沒有看到的輪播圖實現思路，但願能給之後想寫輪播圖的小夥伴一點幫助。

需求分析

循環播放多張圖片
鼠標點擊輪播圖下面的指示點能夠跳轉到對應的圖片，跳轉結束後，再進行循環播放。
能夠手動左右切換圖片，而且指示點也會進行相應的變化。

實現原理

原理主要是讓全部的圖片都在一個大盒子box-imgs裏面。控制每一張照片float爲left，就可讓全部圖片重疊在一塊兒而且都在這個大盒子box-imgs裏；而後再控制全部圖片的display值從而控制圖片顯現的，要顯現出來的圖片display值爲block，其餘全部圖片display值都爲none；
而圖片輪播的效果就能夠通咱們熟悉的定時器(setInterval)函數，每過一段時間改變圖片的display值從而控制圖片達到輪播的效果，咱們還能夠經過給顯現出來的圖片添加類名來增長酷炫的動畫效果。

實現過程&思路

HTML部分

<div class="box-cirs-imgs">
    <div class="box-imgs">
        <ul class="imgs">
            <li><img src="./images/App-4-D.jpg"></li>
            <li><img src="./images/app-2-D.jpg"></li>
            <li><img src="./images/App-3-D.jpg"></li>
            <li><img src="./images/App-1-D.jpg"></li>
        </ul>
    </div>
    <ul class="box-cirs"></ul>
</div>
複製代碼

大盒子box-cirs-imgs包含着裝載全部圖片的盒子box-imgs和指示點類名爲box-cirs的ul結構。盒子box-imgs裏包含着裝載圖片的ul、li結構。這裏結構很簡單，我就不細講了。
注意：html部分我沒有寫指示點的結構，後面我會經過js來添加指示點。

CSS部分

.box-cirs-imgs {
        position: relative;
}
.box-imgs {
    display: inline-block;
    background-color: rgb(165, 165, 165);
}
.imgs li {
    width: 100%;
    float: left;
}
img {
    width: 100%;
    height: 100%;
}
.ani {
    animation: ani_img .5s ease 1;  //給當前顯示的圖片添加一個類名，讓輪播效果更酷炫
}
@keyframes ani_img{//動畫腳本
    0%{
        opacity: 0;        
    }
    50%{
        opacity: 0.5;        
    }
    100%{
        opacity: 1;        
    }
}
.box-cirs {
    position: absolute;
    bottom: 10px;
    right: 50%;
    transform: translateX(50%);
}
.box-cirs li {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 50%;
    cursor: pointer;//改變鼠標觸及區域時光標樣式
}
.active {
    background-color: #00bebe;//高亮的指示點
}
.quiet{
    background-color: #00263c;//指示點的默認樣式
}
複製代碼

注意：雖然上面html結構中沒有寫指示點的結構，可是css樣式中卻要寫指示點的樣式；添加了類名ani用來添加動畫效果，讓輪播效果更酷炫！

JS部分

用js來給頁面動態添加小圓點

//這裏咱們先添加小圓點，讓頁面顯示完整,之所用js添加小圓點，
是由於小圓點的數量應該由圖片張數決定的。
    for (var i = 0; i < len; i++) {
        var c_li = document.createElement('li');
        jsCirs_ul.appendChild(c_li);
    }
複製代碼

將會在下面用到的html中的對象和一些變量

/*獲取HTML中的對象*/
const jsImgs_box = document.querySelector('.box-imgs');
const jsImgs_ul = document.querySelector('.imgs');
const jsImg = jsImgs_ul.children;
const jsCirs_ul = document.querySelector('.box-cirs');
const jsCir = jsCirs_ul.children;
//定義一些變量
var len = jsImg.length;//圖片的張數
var timer = null;                     //初始化一個定時器
var picN = 0;                         //當前顯示的圖片下標
var cirN = 0;                         //當前顯示圖片的小圓點下標
hold = false;                           //初始化按下時的狀態,開關變量
let stratPointX = 0;                    //初始化按下時x軸座標
let endsetX = 0;                        //初始化按鍵離開時x軸座標
複製代碼

首先咱們來理解一下顯現出來的圖片是怎麼設計的，如今就讓咱們來定義一個 Roll()顯現效果函數。

//定義一個函數，經過傳進來的要顯示的圖片的下標來控制顯示，會在autoRun函數中調用
    function Roll(index, num) {
        for (var i = 0; i < len; i++) {
            jsImg[i].style.display = 'none';
            jsCir[i].className = 'quiet';
            jsImg[i].className = '';
        }
        jsImg[index].style.display = 'block';
        jsCir[num].className = 'active';
        jsImg[index].className = 'ani';
    }
複製代碼

定義好了Roll()函數那咱們也就完成了最關鍵的一步，接下來咱們要作的是讓圖片自動輪播。因此在這裏咱們先定義一個autoRun()自動輪播函數。

//設置自動播放函數autoRun(),只要傳入當前的圖片和圓點的索引值就會今後處開始自動輪播
    function autoRun(pic, cir) {
        // 當調用autoRun（）函數，傳入的實參不是pic = 0,cir = 0;時,執行下面語句
        if (pic != 0) {//當調用autoRun（）傳進來的實參不爲0的時候的狀況
            //當點擊最後一個圓點時，要先顯示最後一張圖片，再從第一張從新開始輪播
            if (pic === len - 1) {
                Roll(pic, cir);
                pic = 0;
                cir = 0;
                time(pic, cir);//封裝一個time()函數，減小代碼複用
            } else {//當點擊第2、三個圓點時，顯示當前點擊圓點的圖片和高亮，再進行循環
                Roll(pic, cir);
                ++pic;
                ++cir;
                time(pic, cir);
            }
        } else {//當頁面加載時，預先定義好的pic = 0,cir = 0實參會傳進來，執行下列語句，會自動輪播
            Roll(pic, cir);//先顯示傳入實參的圖片和圓點的高亮
            ++pic
            ++cir
            time(pic, cir);
        }
    }
複製代碼

自動輪播是由定時器setInterval控制的，下面是封裝的time()函數

//封裝自動播放函數autoRun裏的定時器內參數遞增，
        function time(pi, ci) {
            timer = setInterval(function () {
                Roll(pi, ci);
                pi++;
                ci++;
                if (pi > len - 1) {//當第四張圖片顯現時要回到第一張圖片輪播
                    pi = 0;
                }
                if (ci > len - 1) {
                    ci = 0;
                }
            }, 7200)
        }
複製代碼

當頁面加載時就調用autoRun函數自動播放，傳入預先定義好的pic = 0,cir = 0實參

window.onload = autoRun(picN, cirN);
複製代碼

上面已經實現了自動輪播的功能，如今來添加指示點點擊切換圖片功能

//用for循環給每一個圓點綁定一個點擊事件
for (var j = 0; j < len; j++) {
    jsCir[j].index = j;//給每一個圓點一個索引值
    //當點擊小圓點是高亮
    jsCir[j].onclick = function () {
        clearInterval(timer)//每次運行該函數必須清除以前的定時器！
        var i = this.index;  //將當前圓點的index索引值傳給i
        autoRun(i, this.index)  //傳入實參i，this.index，e,調用自動輪播函數autoRun()
    }
}
複製代碼

PC端仿造移動端增長輪播圖觸摸滑屏事件，經過監控鼠標按下時座標橫向的位置，和鼠標放開時座標的變化來判斷要不要觸發滑屏事件。
這種方法在查閱資料後我的以爲pc端並不常見，因此還挺有價值的，但願能對各位看官有所幫助。

// 鼠標摁下時執行的事件
    jsImgs_box.onmousedown = function (e) {
        e.preventDefault();
        //注意：preventDefault()阻止輪播圖圖片被拖拽的默認行爲
        hold = true;
        clearInterval(timer);
        // console.log('你點擊了鼠標');
        stratPointX = e.clientX;
    }
    //其實這裏還能夠添加一個鼠標移動事件onmousemove，各位看官能夠添加試試。
//放開鼠標執行的事件
    jsImgs_box.onmouseup = function (e) {
        // console.log('你放開了鼠標');
        endsetX = e.clientX;
        if (hold) {
            for (var j = 0; j < len; j++) {
                jsImg[j].index = j;
            }
            if ((stratPointX - endsetX) > 400) {
                moveleft();//封裝了左移函數
            } else if ((endsetX - stratPointX) > 400) {
                moveright();//封裝了右移函數
            } else {// bug 修復  若是點擊了會清除定時器，這裏要從新開啓一下
                n = document.querySelector('.ani').index
                autoRun(n, n);
            }
            hold = false;
        }
    }
    // 圖片左移函數
    function moveleft() {
        var i = document.querySelector('.ani').index - 1;
        if (i < 0) {//bug處理，若是當前顯現的圖片是第一張時，移動後應該跳轉到第四張圖片
            i = 3;
        }
        autoRun(i, i);
    }
    //圖片右移函數
    function moveright() {
        var i = document.querySelector('.ani').index + 1;
        if (i > 3) {//bug處理，若是當前顯現的圖片是第四張時，移動後應該跳轉到第一張圖片
            i = 0;
        }
        autoRun(i, i);
    }
複製代碼

注意：若是不在點擊時給jsImgs_box添加preventDefault()，window網頁裏圖片的默認拖拽行爲會影響到onmousemove、onmouseup事件的執行。

總結

一直說要寫第二種原生JS方法實現輪播圖，如今終於完成了，總的來講輪播圖並不難實現，可是若是要寫卻有不少方法，用原生js、純css、RecyclerView、還可使用jquery插件...總之方法不少，可是若是是像我這樣的前端入門新手建議仍是能夠用原生JS手寫一個輪播圖，這樣便可以鍛鍊一下js，還能夠掌握一個網頁經常使用的組件手寫方法，一石二鳥，何樂而不爲呢？好啦，這篇文章到這裏已經寫完了，若是各位大佬發現個人方法還有缺陷，歡迎樓下評論告訴我，畢竟對於我這樣的新手來講，須要不停的發現問題！不停的改進！才能成長成爲像各位看官同樣的大牛！html