JS實現輪播圖效果（有詳細註釋）

追雪球發表於2021-01-01
JS

輪播圖

這個程式碼是博主在學到DOM節點的屬性和方法後寫的，還沒有學習事件，所以可能會有些複雜，但對於初學者可以用來學習邏輯思路。
JS程式碼如下，有詳細註釋，html和css都是很基礎的程式碼，也放在文章末尾了。
效果展示：點我檢視頁面效果（圖片來源網路）

JS

//獲取圖片地址（自行更改）
let imgArr = ['./img/1.jpg', './img/2.jpg', './img/3.jpg', './img/4.jpg', './img/5.jpg', './img/6.jpg'];
//只有輪播效果，立即執行函式
(function(){
    let i = 0;
    setInterval(
        function () {
            i++;
            i == imgArr.length ? i = 0 : "";
            document.getElementsByClassName("box1")[0].src = `${imgArr[i]}`;
        }, 1500
    );
})();

//有輪播效果，並且能選擇到某張圖片
for (let index in imgArr) {
    let doteEle = document.getElementsByClassName("dote")[0];
    //建立圓點
    doteEle.innerHTML += `<span οnclick="lun(${index})"></span>`;
}
//宣告j（必須在輪播函式外宣告，才能使用停止時間函式）
let j;
//輪播函式，要傳參
function lun(i) {
    //獲取圓點
    let spEle = document.getElementsByClassName("dote")[0].children;
    //判斷傳參的i，如果是next，即下一張
    if (i == "next") {
        //遍歷所有的圓點（遍歷圓點相當於在遍歷圖片）
        for (let index in imgArr) {
            //如果最後一個圓點的背景色為白色，即當前展示的圖片是最後一張
            if (spEle[imgArr.length - 1].style.backgroundColor == "white") {
                //則讓i=0，即下標變為了0，然後從59行開始執行，就從第一張開始展示
                i = 0;
            }
            //如果下標為index的圓點背景色為白色，即當前展示的圖片是下標為index的圖片
            else if (spEle[index].style.backgroundColor == "white") {
                //則讓i=index+1，但index是字串，所有要先-0，讓它的資料型別隱式轉換為number；
                //即下標變成了當前圖片的下一張，然後從第59行開始執行
                i = index - 0 + 1;
            }
        }
    }
    //判斷傳參的i，如果是previous，即上一張，同下一張的寫法
    if (i == "previous") {
        for (let index in imgArr) {
            if (spEle[0].style.backgroundColor == "white") {
                i = imgArr.length - 1;
            }
            else if (spEle[index].style.backgroundColor == "white") {
                i = index - 1;
            }
        }
    }
    //先遍歷所有點，讓所有點的背景顏色變成預設的
    for (let index in imgArr) {
        spEle[index].style.backgroundColor = "rgba(255, 255, 255, 0.5)";
    }
    //每次呼叫前先停止時間函式
    clearInterval(j);
    //展示下標為i的圖片（必須在進行時間函式前先展示傳參進來的下標為i的圖片，因為時間函式是先等一個時間再進行執行函式，就會出現第一張有多的時間展示）
    document.getElementsByClassName("box2")[0].src = `${imgArr[i]}`;
    //讓下標為i的點變顏色，即讓它選中（同61行原因）
    spEle[i].style.backgroundColor = "white";
    //進行時間函式，從選中的點的下一張開始
    j = setInterval(
        function () {
            //先遍歷所有點，讓所有點的背景顏色變成預設的
            for (let index in imgArr) {
                spEle[index].style.backgroundColor = "rgba(255, 255, 255, 0.5)";
            }
            //從選中的點的下一張開始進行時間函式，即下標加一
            i++;
            //如果下標等於圖片陣列的長度，就讓下標等於0，即展示第一張
            i == imgArr.length ? i = 0 : "";
            //變圖片
            document.getElementsByClassName("box2")[0].src = `${imgArr[i]}`;
            //變點的顏色
            spEle[i].style.backgroundColor = "white";
        }, 1500
    )
}
//開啟網頁就從下標為0的圖片開始執行輪播函式
lun(0);

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>輪播圖</title>
</head>
<body>
    <div>
        <h4>只有輪播效果</h4>
        <img src="./img/1.jpg" class="box1">
    </div>
    <div>
        <h4>有輪播效果，並且能選擇到某張圖片</h4>
        <span class="jianleft" onclick="lun('previous')">&lt;</span>
        <span class="jianright" onclick="lun('next')">&gt;</span>
        <img src="./img/1.jpg" class="box2">
        <div class="dote"></div>
    </div>
    <script src="lunbo.js"></script>
</body>
</html>

CSS

div {
    width: 512px;
    margin: auto;
    position: relative;
}
img {
    width: 512px;
    height: 288px;
    vertical-align: bottom;
}
.dote {
    position: absolute;
    bottom: 0;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dote>span {
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    margin: 2px;
}
span[class^="jian"]{
    position: absolute;
    top:50%;
    margin-top: -50%;
    display: inline-block;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    margin: 2px;
    background-color: rgba(255, 255, 255, 0.1);
    text-align: center;
    line-height: 50px;
    color: white;
}
.jianleft{
    left: 0;
}
.jianright{
    right: 0;
}

效果展示：點我檢視頁面效果（圖片來源網路）

相關文章