原生js寫簡單輪播圖方式１－從左向右滑動

時間 2019-11-09

原文原文鏈接

輪播圖就是讓圖片每隔幾秒自動滑動，達到圖片輪流播放的效果。輪播圖從效果來講有滑動式的也有漸入式的，滑動式的輪播圖就是圖片從左向右滑入的效果，漸入式的輪播圖就是圖片根據透明度漸漸顯示的效果，這裏說的是實現第一種效果的方法。css

原理

　　相同大小的圖片併成一列，但只顯示其中一張圖片，其他的隱藏，經過修改left值來改變顯示的圖片。

點擊查看效果html

html部分

　　nav爲總容器，第一個ul列表#index爲小圓點列表，鼠標覆蓋哪一個小圓點就顯現第幾張圖片，on是一個給小圓點添加背景顏色屬性的類；第二個ul列表#img爲圖片列表。git

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Carousel Figure</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <!--從左向右滑動-->
        <nav>
            <ul id="index">
                <li class="on"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <ul id="img">
                <li><img src="../images/img1.jpg" alt="img1"></li>
                <li><img src="../images/img2.jpg" alt="img2"></li>
                <li><img src="../images/img3.jpg" alt="img3"></li>
                <li><img src="../images/img4.jpg" alt="img4"></li>
                <li><img src="../images/img5.jpg" alt="img5"></li>
            </ul>
        </nav>
    <script src="script.js"></script>
    </body>
    </html>

css部分

圖片尺寸均爲720*405，這裏須要注意如下幾點：github

ul#img列表相對於nav是絕對定位的，#img的長度必須設置爲全部圖片的總寬度，這樣圖片才能夠並列一排顯示；web
總容器nav的寬度必須設置爲圖片的寬度720px,即只能顯示一張圖片，超出寬度的部分隱藏，即overflow: hidden；函數
小圓點列表應該在圖片列表上面顯示，故設置#img的z-index：-1；this
小圓點列表是由一系列的li經過改變邊框樣式構成，故只需改變背景顏色便可達到移動小圓點的效果。code

*{
        margin:0;
        padding:0;
    }
    nav{
        width: 720px;
        height: 405px;
        margin:20px auto;
        overflow: hidden;
        position: relative;
    }
    #index{
        position: absolute;
        left:320px;
        bottom: 20px;
    
    }
    #index li{
        width:8px;
        height: 8px;
        border: solid 1px gray;
        border-radius: 100%;
        background-color: #eee;
        display: inline-block;
    }
    #img{
        width: 3600px;/*不給寬高沒法移動*/
        height: 405px;
        position: absolute;/*不定義absolute，js沒法設置left和top*/
        z-index: -1;
    }
    #img li{
        width: 720px;
        height: 405px;
        float: left;
    }
    #index .on{
        background-color: black;
    }

JS部分

圖片移動函數moveElement()

　　moveElement函數須要獲取圖片如今的位置以及目標位置並計算它們之間的差距進行移動，能夠用offsetLeft和offsetTop獲取圖片如今的位置。圖片移動時「劃過」的效果是將距離分紅好10次進行移動，即利用setTimeOut函數，然而爲了防止鼠標懸停，需調用clearTimeout()函數，代碼以下：htm

function moveElement(ele,x_final,y_final,interval){//ele爲元素對象
        var x_pos=ele.offsetLeft;
        var y_pos=ele.offsetTop;
        var dist=0;
        if(ele.movement){//防止懸停
            clearTimeout(ele.movement);
        }
        if(x_pos==x_final&&y_pos==y_final){//先判斷是否須要移動
            return;
        }
        dist=Math.ceil(Math.abs(x_final-x_pos)/10);//分10次移動完成
        x_pos = x_pos<x_final ? x_pos+dist : x_pos-dist;
        
        dist=Math.ceil(Math.abs(y_final-y_pos)/10);//分10次移動完成
        y_pos = y_pos<y_final ? y_pos+dist : y_pos-dist;
        
        ele.style.left=x_pos+'px';
        ele.style.top=y_pos+'px';
        
        ele.movement=setTimeout(function(){//分10次移動，自調用10次
            moveElement(ele,x_final,y_final,interval);
        },interval)
    }

小圓點移動函數moveIndex()

　　移動小圓點的實質是移動設置的背景顏色的類on，原理是先判斷哪一個li上有背景顏色，有則去掉，讓全部的li都沒有背景，而後在對當前的li添加背景。對象

function moveIndex(list,num){//移動小圓點
        for(var i=0;i<list.length;i++){
            if(list[i].className=='on'){//清除li的背景樣式
                list[i].className='';
            }
        }
        list[num].className='on';
    }

圖片自動輪播

　　將如下代碼直接寫在window.onload中便可。
　　這裏須要定義一個變量index，表示移動到第index（0~n-1，n爲li的個數）張圖片。

var img=document.getElementById('img');
    var list=document.getElementById('index').getElementsByTagName('li');
    var index=0;//這裏定義index是變量，不是屬性

    var nextMove=function(){//一直向右移動，最後一個以後返回
        index+=1;
        if(index>=list.length){
            index=0;
        }
        moveIndex(list,index);
        moveElement(img,-720*index,0,20);
    };

　　圖片的自動輪播須要用到setInterval()函數，讓程序每隔幾秒自動調用nextMove()函數：

var play=function(){
        timer=setInterval(function(){
            nextMove();
        },2500);
    };

鼠標覆蓋小圓點效果

　　要實現鼠標覆蓋哪一個小圓點，就呈現出對應的圖片這一效果，須要知道鼠標覆蓋的是哪一個小圓點，這裏給每一個li都添加一個自定的屬性index，使該屬性的值爲對應的小圓點的序號i(0~n-1，n爲li的個數)，這樣每次鼠標覆蓋時只需獲取index屬性的值便可知道鼠標覆蓋的是哪一個小圓點。注意，該index屬性和變量index沒有絲毫的關係，只有相同的名字。

for(var i=0;i<list.length;i++){//鼠標覆蓋上哪一個小圓圈，圖片就移動到哪一個小圓圈，並中止
        list[i].index=i;//這裏是設置index屬性，和index變量沒有任何聯繫
        list[i].onmouseover= function () {
            var clickIndex=parseInt(this.index);
            moveElement(img,-720*clickIndex,0,20);
            index=clickIndex;
            moveIndex(list,index);
            clearInterval(timer);
        };
        list[i].onmouseout= function () {//移開後繼續輪播
            play();
        };
    }

總結

　　輪播圖的實現並不複雜，主要在於將圖片的移動行爲和小圓點的移動行爲分開，這樣就比較容易實現。這個輪播圖其實仍是有點問題的，從最後一幅圖滑向第一個時滑動的距離較長，其實也很好解決，將滑動的方式改一下，這裏是根據-720*index來計算最終的left值，而index是將圖片的移動和小圓點的移動綁到一塊兒，將滑動方式改爲如今的offsetLeft+（-720），圖片的移動就能夠與index值無關，而後在html文件增長一幅圖片：

<li><img src="../images/img1.jpg" alt="img1"></li>
    <li><img src="../images/img2.jpg" alt="img2"></li>
    <li><img src="../images/img3.jpg" alt="img3"></li>
    <li><img src="../images/img4.jpg" alt="img4"></li>
    <li><img src="../images/img5.jpg" alt="img5"></li>
    <li><img src="../images/img1.jpg" alt="img1"></li>

而後在滑到最後一幅圖片時，迅速的將偏移量賦值0，變成第一幅，兩幅圖同樣，沒法分辨其中變化，便可達到無縫鏈接。

if(x_pos==-3600){
        ele.style.left='0';
        ele.style.top='0';
    }else{
        ele.style.left=x_pos+'px';
        ele.style.top=y_pos+'px';
    }