JS案例：輪播圖（第二代）

時間 2019-11-09

原文原文鏈接

較上個版本功能全面，函數模塊化，下降聯繫，bug減小，附上代碼：javascript

Html：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="./css/main.css">
    </head>

    <body>
        <div id="box">
            <div id="pic_box"></div>
            <img id="left" src="img/left.png" alt="">
            <img id="right" src="img/right.png" alt="">
            <ul id="dot_box"></ul>
        </div>

        <script src="./js/main.js">

        </script>
    </body>

</html>

Css：

* {
    margin: 0;
    padding: 0;
}

#box {
    margin: 50px auto;
    width: 960px;
    height: 320px;
    background: lightcoral;
    position: relative;
    overflow: hidden;
}

#pic_box {
    height: 320px;
    background: lightblue;
    position: absolute;
}

#left {
    position: absolute;
    top: 130px;
    left: 10px;
}

#right {
    position: absolute;
    top: 130px;
    right: 10px;
}

ul {
    list-style: none;
    position: absolute;
    bottom: 20px;
    left: 400px;
}

li {
    width: 20px;
    height: 20px;
    list-style: none;
    border-radius: 50%;
    float: left;
    margin-left: 5px;
}

JS：

var box, pic_box, left, right, dot_box, liList; //定義最外面的大盒子，裝圖片的盒子，左右按鍵，盒子下面的小點容器，及當前小點容器.
var count = 0; //記錄當前顯示的圖片索引
var num = 160; //定時器幀數控制
var direct; //左右方向（方向爲左向右移動，反之向左移動）方向是按鈕的方向
var bool = false; //控制是否容許輪播
var autoPlay = false; //是否自動輪播
var picurl = ["img/a.jpeg", "img/b.jpeg", "img/c.jpeg", "img/d.jpeg", "img/e.jpeg"]; //圖片路徑
var piclist = []; //加載的圖片（兩張）
init(); //入口函數

function init() { //獲取全部元素並賦值給變量，添加事件
    box = document.getElementById("box");
    pic_box = document.getElementById("pic_box");
    left = document.getElementById("left");
    right = document.getElementById("right");
    dot_box = document.getElementById("dot_box");
    left.addEventListener("click", picChange); //點擊左鍵
    right.addEventListener("click", picChange); //點擊右鍵
    box.addEventListener("mouseenter", isAuto); //鼠標進入大盒子取消自動輪播
    box.addEventListener("mouseleave", isAuto); //鼠標離開大盒子自動輪播
    creatImg(); //初始化並加載全部圖片
    animation(); //開啓每幀移動函數
    creatDot(); //新建小點（點擊切換圖片）
}

function creatImg() {
    for (var j = 0; j < picurl.length; j++) { //根據圖片源新建圖片
        piclist[j] = new Image();
        piclist[j].src = picurl[j];
        piclist[j].style.width = "960px";
        piclist[j].style.height = "320px";
    }
    pic_box.appendChild(piclist[0]); //初始化裝圖片的盒子，插入第一張圖片

}

function picChange(e) {
    if (bool) return; //若輪播開關爲真時，不執行函數，即點擊一次後須要等整張圖片輪播完才能點擊下一次
    if (this === left) { //當單擊向左按鈕
        direct = "left"; //將方向改爲左
        count--; //圖片索引減一
        if (count === -1) { //當減到-1時，讓索引爲圖片總數減一（數組從零開始）
            count = picurl.length - 1;
        }
    } else if (this === right) { //當單擊向右按鈕
        direct = "right"; //將方向改爲右
        count++; //圖片索引加一
        if (count === picurl.length) { //當加到圖片總數減一時，讓索引爲0（數組從零開始）
            count = 0;
        }
    }
    nextPic(); //創造下一張
}

function nextPic() { //加載下一張圖片

    pic_box.style.width = 960 * 2 + "px"; //初始化位置
    if (direct === "right") { //當方向爲右時，在圖片後面插入下一張圖片
        pic_box.appendChild(piclist[count]);
        pic_box.style.left = 0;
    } else if (direct === "left") { //當方向爲左時，在圖片前面插入下一張圖片
        pic_box.insertBefore(piclist[count], pic_box.firstElementChild);
        pic_box.style.left = -960 + "px";
    }
    bool = true; //圖片加載完成後，讓控制圖片輪播的開關爲真，防止圖片輪播時執行其餘事件
    liChange(); //讓小點改變
}

function animation() { //動畫函數，自動輪播和輪播
    requestAnimationFrame(animation);
    picMove();
    autoScroll();
}

function creatDot() { //新建小點，控制點擊切換圖片
    for (var i = 0; i < picurl.length; i++) {
        var li = document.createElement("li");
        dot_box.appendChild(li);
        li.style.background = "rgba(255,255,255,0.7)";
    }
    dot_box.firstElementChild.style.background = "rgba(255,255,255,1)"; //默認選中第一個小點
    dot_box.addEventListener("click", changeDot); //點擊小點觸發事件，切換圖片
    liChange();
}

function changeDot(e) {
    if (bool) return; //若輪播開關爲真時，不執行函數，即點擊一次後須要等整張圖片輪播完才能點擊下一次
    var list = Array.from(dot_box.children); //將小點放至數組
    var index = list.indexOf(e.target); //查找當前的小點
    if (index === count) { //若當前點擊的圖片與索引相等，表示不切換（就是自己）
        return;
    }
    if (index > count) { //當點擊的小點在當前右邊，將方向換成右
        direct = "right";
    } else if (index < count) { //當點擊的小點在當前左邊，將方向換成左
        direct = "left";
    }
    count = index; //將當前索引切換成點擊的那個
    nextPic(); //新建下一張圖片
}

function liChange() {
    if (liList) { //前一個小點背景透明
        liList.style.backgroundColor = "rgba(255,255,255,0.7)";
    }
    liList = dot_box.children[count]; //將被切換的小點賦值給當前小點，使其根據計數器切換
    liList.style.background = "rgba(255,255,255,1)";
}

function picMove() {
    if (!bool) return; //若輪播開關爲假時，不執行函數，即點擊一次按鈕或小點後才能開始輪播
    if (direct === "left") { //向右移動
        pic_box.style.left = pic_box.offsetLeft + 20 + "px"; //移動速度，每次20px，當移動到0時關閉輪播開關，並將最後一張圖刪除
        if (pic_box.offsetLeft === 0) {
            bool = false;
            pic_box.lastElementChild.remove();
        }
    } else if (direct === "right") { //向左移動
        pic_box.style.left = pic_box.offsetLeft - 20 + "px"; //移動速度，每次-20px，當移動到-960時關閉輪播開關，並將第一張圖刪除，重置位置爲0
        if (pic_box.offsetLeft === -960) {
            bool = false;
            pic_box.firstElementChild.remove();
            pic_box.style.left = 0;
        }
    }
}

function autoScroll() { //自動輪播
    if (!autoPlay) return; //若自動輪播開關爲非（鼠標移入時），不自動輪播
    num--; //定時器幀數計數器減一，減到0時賦值爲160
    if (num === 0) {
        num = 160;
        direct = "right";
        count++;
        if (count === picurl.length) {
            count = 0;
        }
        nextPic();
    }

}

function isAuto(e) { //鼠標移入時，不自動輪播，反之，自動輪播
    if (e.type === "mouseenter") {
        autoPlay = false;
    } else if (e.type = "mouseleave") {
        autoPlay = true;
    }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。