授人以漁式解析原生JS寫輪播圖

Sadhu發表於2019-03-04
JS

需求與分析

需求：
迴圈無縫自動輪播五張圖，按左右箭頭可以手動切換圖片，滑鼠點選輪播圖下面按鈕 1 2 3 4 5會跳轉到對應的第1 2 3 4 5張圖片。滑鼠放到輪播圖的圖片上時不再自動輪播並且左右箭頭顯示出來，滑鼠移開時左右箭頭隱藏掉並且自動輪播。
效果圖：

授人以漁式解析原生JS寫輪播圖
分析：
佈局：準備七張圖片實現所謂的無縫輪播，固定七張圖片的寬高，下面假設為600px*400px。假設html分為三個區：圖片區、按鈕區、箭頭區。然後用個div包住這三個區並且固定該div的寬高也為600*400。

樣式：左右居中、距離頁面頂部100px顯示。五個按鈕為圓形的，並且輪播到哪張圖或者點到哪個按鈕時，該按鈕顏色變化。其餘的小樣式具體寫程式碼的時候佛系新增。

JS指令碼：就說明一點圖的擺放位置，其餘寫到那部分程式碼的時候再說。
七張圖中，有兩張是和那不同的五張圖片中的第一張、第五張相同的。其中和五張不同圖中和第一張相同的圖放置在七張圖片中第七張，和五張不同圖中和第五張相同的圖放置在七張圖片中第一張。原因寫到那部分程式碼時會再說

實現步驟

  1. 先來個html框架
<body>
    <div class="container">
        <div class="wrap">
            <img src="./imgs/5.jpg" alt="5">
            <img src="./imgs/1.jpg" alt="1">
            <img src="./imgs/2.jpg" alt="2">
            <img src="./imgs/3.jpg" alt="3">
            <img src="./imgs/4.jpg" alt="4">
            <img src="./imgs/5.jpg" alt="5">
            <img src="./imgs/1.jpg" alt="1">
        </div>
        <div class="button">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </div>
        <a href="javascript:void(0);" class="jt jt_left">&lt;</a>
        <a href="javascript:void(0);" class="jt jt_right">&gt;</a>
    </div>
複製程式碼

給a標籤加 javascript:void (0);是為了不讓a標籤跳轉。
2. 定義樣式
主要目的：給總div、圖片區按鈕區div、圖片、按鈕、左右箭頭定義寬高，讓七個圖片並排顯示，五個按鈕位於圖片底部居中顯示，兩個箭頭分別到左右兩邊的適中位置顯示。

/* 清除預設樣式 */
*{
    margin: 0;
    padding: 0;
    text-decoration: none;
}
/* 總div */
div.container{
    position: relative;
    width: 600px;
    height: 400px;
    margin: 100px auto 0 auto;
    box-shadow: 0 0 5px aqua;
    overflow: hidden;
}
/* 圖片區 */
div.container div.wrap{
    position: absolute;
    width: 4200px;
    height: 400px;
    z-index: 1;
}

div.container div.wrap img{
    width: 600px;
    height: 400px;
    float: left;
}
/* 按鈕區 */
div.container div.button{
    position: absolute;
    right: 225px;
    bottom: 15px;
    width: 150px;
    height: 20px;
    z-index: 2;
    text-align: center;
}

div.container div.button span{
    margin-left: 5px;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: greenyellow;
    text-align: center;
    color: white;
    cursor: pointer;
    opacity: 0.6;
}
/* 輪播到哪張圖，哪個按鈕有這個效果，與其他按鈕有個區別。 */
div.container div.button span.on{
    opacity: 1;
}
/* 箭頭區 */
div.container .jt{
    position: absolute;
    top: 40%;
    color:greenyellow;
    padding: 0px 14px;
    font-size: 55px;
    text-align: center;
    z-index: 2;
    display: none;
}

div.container .jt_left{
    left: 10px;
}

div.container .jt_right{
    right: 10px;
}

div.container:hover .jt{
    display: block;
    opacity: 0.4;
}

div.container .jt:hover{
    opacity: 1;
}
複製程式碼

為了讓剛進頁面第一張圖顯示的是1.jpg,所以在圖片區圖裡面加個行內樣式，讓預設開啟頁面顯示這個圖：
<div class="wrap" style="left:-600px">...</div> 此時效果是這樣，當滑鼠移動到圖片上、箭頭處都有一些樣式：

授人以漁式解析原生JS寫輪播圖
3. JS指令碼
第一步：實現圖片自動切換
封裝兩個函式：next()、prev()函式，分別對應向右輪播和向左輪播，此時呼叫哪個函式，就可以向哪個方向一張圖片一張圖片得切換輪播。

var wrap = document.getElementsByClassName('wrap')[0];

var newLeft = -600;

function next() {
    setInterval(function(){
        if(newLeft == -2400){
            newLeft = 0;
        }else{
            newLeft = parseInt(wrap.style.left) - 600;
        }
        wrap.style.left = newLeft + 'PX';
    },1000)
}

function prev() {
    setInterval(function(){
        if(newLeft == -600){
            newLeft = -3000;
        }else{
            newLeft = parseInt(wrap.style.left) + 600;
        }
        wrap.style.left = newLeft + 'PX';
    },1000)
}
複製程式碼

第二步：讓輪播的時候各個圖片有運動軌跡地切換，而不是硬生生地從一張圖片變到另一張圖片。
這裡需要用到我封裝好的一個運動函式startMove()，做成工具使用：

function getStyle(obj, attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj, false)[attr];
    }
}

//運動框架 startMove函式    
function startMove(obj,json,fn){       
    clearInterval(obj.timer);      
    //開啟定時器        
    obj.timer = setInterval(function(){  
        var flag = true;                 
        //遍歷json               
        for (var attr in json) {                                
            //取當前值 iCur   
            var iCur = 0;                
            if (attr == 'opacity') {                       
                iCur = Math.round(parseFloat(getStyle(obj, attr))*100);                  
            }else{                     
                iCur = parseInt(getStyle(obj, attr));                
            }                  
            //算速度：iSpeed
            //目標值：json[attr]                   
            var iSpeed = (json[attr]-iCur)/8;
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);                       
            //檢測停止                 
            if (iCur != json[attr]) {                      
                flag = false                 
            }                  
            if (attr == 'opacity') {                       
                obj.style.filter = 'alpha(opacity:'+iCur+iSpeed+')';                      
                obj.style.opacity = (iCur+iSpeed)/100;                
            }else{                     
                obj.style[attr] = iCur + iSpeed + 'px';                   
            }   
        }        
        if (flag) {                  
            clearInterval(obj.timer);                  
            if (fn) {fn();}               
        }                     
    },30)      
}
複製程式碼

這個封裝的運動函式這裡，加上我的註釋還看不懂程式碼的，可以去看看這個視訊，這講師講得很清楚：JS動畫效果
然後利用這個原理：當圖片往右輪播到第六張的時候，馬上讓第一張呈現出來，緊接著呼叫封裝好的運動函式讓從第一張圖運動切換到第二張。往左輪播時也是一樣的道理，當輪播到第一張的時候馬上讓第六張呈現出來，緊接著從第六張運動到第五張。這樣子從視覺上看來就是五張圖片一直迴圈無縫輪播下去的
這是也為什麼要用七張圖片，並且第一張圖片和第六張一樣，第七張和第二張一樣的原因。 程式碼如下：

var wrap = document.getElementsByClassName('wrap')[0];

var newLeft = -600;

function next() {
    setInterval(function () {
        if (newLeft == -3000) {
            newLeft = 0;
            wrap.style.left = newLeft + 'px';
        }
        newLeft -= 600;
        startMove(wrap, {
            "left": newLeft
        })
        // wrap.style.left = newLeft + 'PX';
    }, 3000)
}

function prev() {
    setInterval(function () {
        if (newLeft == 0) {
            newLeft = -3000;
            wrap.style.left = newLeft + 'px';
        }
        newLeft += 600;
        startMove(wrap, {
            "left": newLeft
        });
    }, 3000)
}
複製程式碼

第三步：使當滑鼠移到圖片上時，停止自動輪播而讓點選幾次左右箭頭來控制往左右一張一張地輪播幾張。
核心原理：清除定時器，繫結click、onmouseenter、onmouseleave事件，重構下程式碼封裝出往右往左輪播函式和自動輪播函式。
往右輪播函式：

function next() {
    if (newLeft == -3000) {
        newLeft = 0;
        wrap.style.left = newLeft + 'px';
    }
    newLeft -= 600;
    startMove(wrap, {
        "left": newLeft
    });
}
複製程式碼

往左輪播函式：

function prev() {
    if (newLeft == 0) {
        newLeft = -3000;
        wrap.style.left = newLeft + 'px';
    }
    newLeft += 600;
    startMove(wrap, {
        "left": newLeft
    });
}
複製程式碼

自動播放函式：

var timer = null;

function autoPlay() {
    timer = setInterval(function () {
        next();
    }, 2000)
} /* 自動播放 */
複製程式碼

繫結各個事件：

container.addEventListener('mouseenter', function () {
    clearInterval(timer);
}, false)

container.addEventListener('mouseleave', function () {
    autoPlay();
}, false)

left.addEventListener('click', function () {
    prev();
})

right.addEventListener('click', function () {
    next();
})
複製程式碼

第四步：

  • 處理按鈕，使剛進頁面時，第一個按鈕有span元素中類為'on'的效果。
  • 接下來，實現視覺上輪播到哪張圖了，就對應哪個按鈕有類為'on'的效果。
  • 最後，當你點到哪個按鈕時，該按鈕有類為'on'的效果，並且跳轉到視覺上的第幾張圖。

    封裝個處理按鈕的函式，功能是給每個按鈕的類名設定為空，然後當視覺上移動到第A張圖時，就讓此時這第A個按鈕的型別為'on'。
    所以需要設定個哨兵index監聽這是視覺上第幾張圖，然後為這張圖對應的按鈕新增'on'類：
//處理按鈕
var index = 0;
var len = dot.length;
function setCurrentDot(){
    for (var m = 0; m < len; m++){
        dot[m].className = ''; 
    }
    dot[index].className = 'on';
}
setCurrentDot();
複製程式碼

此時呼叫了這個函式的話，就等於剛進入頁面的時候預設顯示的第一張圖片也是預設讓第一個按鈕有'on'類的效果。

那怎麼讓當視覺上移動到第A張圖時，就讓此時這第A個按鈕的型別為'on'呢？
可以在輪播一次的函式里加入修改index哨兵的值並且呼叫setCurrentDot()函式。在next()中:

    index++;
    if(index === 5){
        index = 0;
    }
    setCurrentDot();
複製程式碼

在prev()中:

    index--;
    if(index === -1){
        index = 4;
    }
    setCurrentDot();
複製程式碼

最後，實現點到哪個按鈕時，該按鈕有類為'on'的效果，並且跳轉到視覺上的第幾張圖。
核心思路：當點選該按鈕時，比如點了第三個按鈕，那麼此時應該顯示的圖片應該是視覺上第三張圖片也就是七張圖片中的第四張，第四張對應的wrap的left為-1800px，然後找出對應的規律，此時的newLeft就應該為：-600 * (x + 1)。那麼不管在點選按鈕前已經輪播到哪裡了，只要在點選後，使用運動函式startMove()移動到這個newLeft位置處就行了。按例子來說此時的哨兵index也等於3，因為點了第幾個按鈕肯定就第幾個按鈕有'on'類咯。

根據核心思路寫出程式碼為(這裡需要注意繫結事件時的閉包問題)：

// 點到哪個按鈕時，該按鈕有類為'on'的效果，並且跳轉到視覺上的第幾張圖。
for (var s = 0; s < len; s++){
    (function(s){
        dot[s].addEventListener('click',function(){
            newLeft = -600 * (s + 1);
            startMove(wrap,{"left":newLeft});
            index = s;
            setCurrentDot();
        },false)
    }(s))
}
複製程式碼

寫到這裡，所以需求就做完了。

最後

思路就是這樣，重要的不是程式碼，是分析邏輯。 原始碼已傳到github，希望對您有幫助的~

相關文章