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

Zack 發(fā)布于2019-08-29 16:58 / 3343人閱讀

摘要：鼠標(biāo)放到輪播圖的圖片上時不再自動輪播并且左右箭頭顯示出來，鼠標(biāo)移開時左右箭頭隱藏掉并且自動輪播。核心原理清除定時器，綁定事件，重構(gòu)下代碼封裝出往右往左輪播函數(shù)和自動輪播函數(shù)。

需求與分析

需求：
循環(huán)無縫自動輪播五張圖，按左右箭頭可以手動切換圖片，鼠標(biāo)點(diǎn)擊輪播圖下面按鈕 1 2 3 4 5會跳轉(zhuǎn)到對應(yīng)的第1 2 3 4 5張圖片。鼠標(biāo)放到輪播圖的圖片上時不再自動輪播并且左右箭頭顯示出來，鼠標(biāo)移開時左右箭頭隱藏掉并且自動輪播。

效果圖：

分析：

布局：準(zhǔn)備七張圖片實(shí)現(xiàn)所謂的無縫輪播，固定七張圖片的寬高，下面假設(shè)為600px*400px。假設(shè)html分為三個區(qū)：圖片區(qū)、按鈕區(qū)、箭頭區(qū)。然后用個div包住這三個區(qū)并且固定該div的寬高也為600*400。

樣式：左右居中、距離頁面頂部100px顯示。五個按鈕為圓形的，并且輪播到哪張圖或者點(diǎn)到哪個按鈕時，該按鈕顏色變化。其余的小樣式具體寫代碼的時候佛系添加。

JS腳本：就說明一點(diǎn)圖的擺放位置，其余寫到那部分代碼的時候再說。

七張圖中，有兩張是和那不同的五張圖片中的第一張、第五張相同的。其中和五張不同圖中和第一張相同的圖放置在七張圖片中第七張，和五張不同圖中和第五張相同的圖放置在七張圖片中第一張。原因?qū)懙侥遣糠执a時會再說

實(shí)現(xiàn)步驟 1、先來個html框架

給a標(biāo)簽加 javascript:void (0);是為了不讓a標(biāo)簽跳轉(zhuǎn)。

2、定義樣式

主要目的：給總div、圖片區(qū)按鈕區(qū)div、圖片、按鈕、左右箭頭定義寬高，讓七個圖片并排顯示，五個按鈕位于圖片底部居中顯示，兩個箭頭分別到左右兩邊的適中位置顯示。

/* 清除默認(rèn)樣式 */
*{
    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;
}
/* 圖片區(qū) */
div.container div.wrap{
    position: absolute;
    width: 4200px;
    height: 400px;
    z-index: 1;
}

div.container div.wrap img{
    width: 600px;
    height: 400px;
    float: left;
}
/* 按鈕區(qū) */
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;
}
/* 輪播到哪張圖，哪個按鈕有這個效果，與其他按鈕有個區(qū)別。 */
div.container div.button span.on{
    opacity: 1;
}
/* 箭頭區(qū) */
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;
}

為了讓剛進(jìn)頁面第一張圖顯示的是1.jpg,所以在圖片區(qū)圖里面加個行內(nèi)樣式，讓默認(rèn)打開頁面顯示這個圖：

...

此時效果是這樣，當(dāng)鼠標(biāo)移動到圖片上、箭頭處都有一些樣式：

3、JS腳本

第一步：實(shí)現(xiàn)圖片自動切換

封裝兩個函數(shù)：next()、prev()函數(shù)，分別對應(yīng)向右輪播和向左輪播，此時調(diào)用哪個函數(shù)，就可以向哪個方向一張圖片一張圖片得切換輪播。

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)
}

第二步：讓輪播的時候各個圖片有運(yùn)動軌跡地切換，而不是硬生生地從一張圖片變到另一張圖片。

這里需要用到我封裝好的一個運(yùn)動函數(shù)startMove()，做成工具使用：

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

//運(yùn)動框架 startMove函數(shù)    
function startMove(obj,json,fn){       
    clearInterval(obj.timer);      
    //開啟定時器        
    obj.timer = setInterval(function(){  
        var flag = true;                 
        //遍歷json               
        for (var attr in json) {                                
            //取當(dāng)前值 iCur   
            var iCur = 0;                
            if (attr == "opacity") {                       
                iCur = Math.round(parseFloat(getStyle(obj, attr))*100);                  
            }else{                     
                iCur = parseInt(getStyle(obj, attr));                
            }                  
            //算速度：iSpeed
            //目標(biāo)值：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)      
}

這個封裝的運(yùn)動函數(shù)這里，加上我的注釋還看不懂代碼的，可以去看看這個視頻，這講師講得很清楚：JS動畫效果

然后利用這個原理：當(dāng)圖片往右輪播到第六張的時候，馬上讓第一張呈現(xiàn)出來，緊接著調(diào)用封裝好的運(yùn)動函數(shù)讓從第一張圖運(yùn)動切換到第二張。往左輪播時也是一樣的道理，當(dāng)輪播到第一張的時候馬上讓第六張呈現(xiàn)出來，緊接著從第六張運(yùn)動到第五張。這樣子從視覺上看來就是五張圖片一直循環(huán)無縫輪播下去的

這是也為什么要用七張圖片，并且第一張圖片和第六張一樣，第七張和第二張一樣的原因。
代碼如下：

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)
}

第三步：使當(dāng)鼠標(biāo)移到圖片上時，停止自動輪播而讓點(diǎn)擊幾次左右箭頭來控制往左右一張一張地輪播幾張。

核心原理：清除定時器，綁定click、onmouseenter、onmouseleave事件，重構(gòu)下代碼封裝出往右往左輪播函數(shù)和自動輪播函數(shù)。

往右輪播函數(shù)：

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

往左輪播函數(shù)：

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

自動播放函數(shù)：

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();
})

第四步：

處理按鈕，使剛進(jìn)頁面時，第一個按鈕有span元素中類為"on"的效果。

接下來，實(shí)現(xiàn)視覺上輪播到哪張圖了，就對應(yīng)哪個按鈕有類為"on"的效果。

最后，當(dāng)你點(diǎn)到哪個按鈕時，該按鈕有類為"on"的效果，并且跳轉(zhuǎn)到視覺上的第幾張圖。

封裝個處理按鈕的函數(shù)，功能是給每個按鈕的類名設(shè)置為空，然后當(dāng)視覺上移動到第A張圖時，就讓此時這第A個按鈕的類型為"on"。

所以需要設(shè)置個哨兵index監(jiān)聽這是視覺上第幾張圖，然后為這張圖對應(yīng)的按鈕添加"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();

此時調(diào)用了這個函數(shù)的話，就等于剛進(jìn)入頁面的時候默認(rèn)顯示的第一張圖片也是默認(rèn)讓第一個按鈕有"on"類的效果。

那怎么讓當(dāng)視覺上移動到第A張圖時，就讓此時這第A個按鈕的類型為"on"呢？

可以在輪播一次的函數(shù)里加入修改index哨兵的值并且調(diào)用setCurrentDot()函數(shù)。在next()中:

    index++;
    if(index === 5){
        index = 0;
    }
    setCurrentDot();

在prev()中:

    index--;
    if(index === -1){
        index = 4;
    }
    setCurrentDot();

最后，實(shí)現(xiàn)點(diǎn)到哪個按鈕時，該按鈕有類為"on"的效果，并且跳轉(zhuǎn)到視覺上的第幾張圖。

核心思路：當(dāng)點(diǎn)擊該按鈕時，比如點(diǎn)了第三個按鈕，那么此時應(yīng)該顯示的圖片應(yīng)該是視覺上第三張圖片也就是七張圖片中的第四張，第四張對應(yīng)的wrap的left為-1800px，然后找出對應(yīng)的規(guī)律，此時的newLeft就應(yīng)該為：-600 * (x + 1)。那么不管在點(diǎn)擊按鈕前已經(jīng)輪播到哪里了，只要在點(diǎn)擊后，使用運(yùn)動函數(shù)startMove()移動到這個newLeft位置處就行了。按例子來說此時的哨兵index也等于3，因?yàn)辄c(diǎn)了第幾個按鈕肯定就第幾個按鈕有"on"類咯。

根據(jù)核心思路寫出代碼為(這里需要注意綁定事件時的閉包問題)：

// 點(diǎn)到哪個按鈕時，該按鈕有類為"on"的效果，并且跳轉(zhuǎn)到視覺上的第幾張圖。
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，覺得對您有幫助的，麻煩點(diǎn)個star，謝謝~

GPU云服務(wù)器云服務(wù)器寫輪播圖 js輪播圖視頻 js焦點(diǎn)輪播圖輪播圖鼠標(biāo)懸浮js

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/114018.html

發(fā)表評論

登陸后可評論

0條評論

Zack

男|高級講師

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

TA的文章

高品質(zhì)的音樂藍(lán)牙耳機(jī)有哪些推薦？音質(zhì)好的藍(lán)牙耳機(jī)排行榜

閱讀 2814·2021-11-18 10:02
咕咕云：雙十一，限量秒殺 / 香港沙田CN2 臺灣大帶寬洛杉磯4837

閱讀 3673·2021-11-15 17:59
2021-09-04

閱讀 2306·2021-09-06 15:00
授人以漁式解析原生JS寫輪播圖

閱讀 3344·2019-08-29 16:58
前端跨域之原因&&方案&&原理

閱讀 1056·2019-08-26 10:34
React的路由深入

閱讀 1581·2019-08-26 10:15
js基礎(chǔ)常用知識點(diǎn)由淺入深整理篇

閱讀 1286·2019-08-26 10:11
echarts中X軸和Y軸滾動條

閱讀 2713·2019-08-23 18:33

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章