遊民輪播圖效果實現

　　遊民輪播圖，以下圖示，當紅色進度條走滿的時候更換圖片，同時下方對應的縮略圖也變化。點擊縮略圖也會更換圖片的效果。

　　該輪播圖爲過渡變化，因此不用無縫鏈接，只需5張圖片便可。

　　首先，大圖區域給了div，並設置了背景圖片，後期變化全是用背景圖片的變換來實現。而後給了縮略圖的5張小圖。

　　html代碼以下：

 <section class="container" id="container">
        <i id="leftPo"></i>
        <div class="imgs" id="imgs">
        </div>
        <div id="line">
        </div>
        <div class="thumbnail" id="thumbnail">
            <img src="../img/1.jpeg" alt="">
            <img src="../img/2.jpeg" alt="">
            <img src="../img/3.jpeg" alt="">
            <img src="../img/4.jpeg" alt="">
            <img src="../img/5.jpeg" alt="">
        </div>
        <i id="rightPo"></i>
    </section>

　　css代碼以下：

   <style>
        * {
            padding: 0;
            margin: 0;
        }

        .container {
            width: 640px;
            height: 600px;
            margin: 20px auto;
            position: relative;
            overflow: hidden;
            background-color: rgb(228, 228, 228);
        }

        .imgs {
            width: 640px;
            height: 480px;
            border: 3px double gray;
            box-sizing: border-box;
            background-image: url('../img/1.jpeg');
            transition: all linear .5s;
        }

        #leftPo {
            display: inline-block;
            width: 30px;
            height: 30px;
            background-image: url('../img/left.png');
            position: absolute;
            top: 225px;
            left: 20px;
            z-index: 2;
            cursor: pointer;
            opacity: 0;
            transition: all linear .5s
        }

        #rightPo {
            display: inline-block;
            width: 30px;
            height: 30px;
            background-image: url('../img/right_03.png');
            position: absolute;
            top: 225px;
            right: 20px;
            z-index: 2;
            cursor: pointer;
            opacity: 0;
            transition: all linear .2s
        }

        #line {
            width: 640px;
            border-bottom: 6px solid red;
            position: absolute;
            left: -640px;
        }

        .thumbnail {
            width: 100%;
            display: flex;
            justify-content: space-around;
            margin-top: 10px;
        }

        .thumbnail>img {
            width: 120px;
            height: 100px;
            cursor: pointer;
        }
    </style>

　　　　而後，將全部圖片都裝進數組裏存放起來，以後經過索引調用圖片便可。

　　　　js代碼以下：

 　　　　　　 let line = document.getElementById('line');
            let imgArr = ['../img/1.jpeg', '../img/2.jpeg', '../img/3.jpeg', '../img/4.jpeg', '../img/5.jpeg'];
            let imgs = document.getElementById('imgs');
            let leftPo = document.getElementById('leftPo');
            let rightPo = document.getElementById('rightPo');
            let thumbnail = document.getElementById('thumbnail');
            let thumbnails = document.getElementsByTagName('IMG');
            // 第一張圖片的縮略圖初始化
            thumbnails[0].style.border = "4px solid gray";
            // stopTimerLine表示紅線的定時器，stopTimerAll表示總體動畫的定時器，index表示縮略圖的索引。
            let stopTimerLine, stopTimerAll, index = 0;
            // 紅線移動調用函數  同時在這個函數裏要設置return lineMove，即返回自己函數，否則就只能執行一次
            let lineMove = function () {
                stopTimerLine = setInterval(function () {
                    if (line.offsetLeft < 0) {
                        line.style.left = line.offsetLeft + 2 + 'px';
                    } else {
                        clearInterval(stopTimerLine);
                    }
                }, 10);
                rightPo.onclick();
                return lineMove;
            }
            // 改變圖片，改變縮略圖樣式，同時紅線恢復初始位置
            let changeStyle = function (index) {
                imgs.style.backgroundImage = `url('../img/${index}.jpeg')`;
                for (let j = 0; j < thumbnails.length; j++) {
                    if (thumbnails[j].style.border != '') {
                        thumbnails[j].style.border = '';
                        break;
                    }
                }
                thumbnails[index - 1].style.border = "4px solid gray";
                line.style.left = -640 + 'px';
            }
            // 右箭頭按鈕點擊更換圖片
            rightPo.onclick = function () {
                if (index == 5) {
                    index = 1;
                } else {
                    index++;
                }
                changeStyle(index);

            }
            // 左箭頭按鈕點擊更換圖片
            leftPo.onclick = function () {
                if (index == 0 || index == 1) {
                    index = 5;
                } else {
                    index--;
                }
                changeStyle(index);
            }
            // 縮略圖點擊更換圖片
            thumbnail.onclick = function (event) {
                for (let i = 0; i < thumbnails.length; i++) {
                    if (thumbnails[i] == event.target)
                        index = i + 1;
                }
                changeStyle(index);
            }
            // 鼠標移入圖片框就顯示左右箭頭，移出時隱藏
            container.onmousemove = function () {
                leftPo.style.opacity = '0.8';
                rightPo.style.opacity = '0.8';
            }
            container.onmouseout = function () {
                leftPo.style.opacity = '0';
                rightPo.style.opacity = '0';
            }
            // 紅線移動判斷圖片的改變   在此計時器中 用lineMove()先調用一次函數（同時在這個函數裏要設置return lineMove，即返回自己函數，否則就只能執行一次），這樣就刷新頁面即執行一次
            let imgMove = function () {
                clearInterval(stopTimerAll);
                stopTimerAll = setInterval(lineMove(), 5000);
            }
            imgMove();

　　這裏有一個小技巧，通常狀況下設置setinterval的定時器，當咱們刷新頁面的時，會等待1個間隔時間後纔開始運動。那麼該如何解決？這裏我在設置定時器時，直接先調用了一次函數，即  stopTimerAll = setInterval(lineMove(), 5000);    這樣刷新頁面當即調用，不用等待。

　　不過這樣也存在一個問題，就是這樣寫就該函數就只能調用一次了，因此我在lineMove這個函數裏的最後面加了一個return lineMove；即返回函數自己，這樣在第一次調用以後，就會返回這個函數到定時器裏，以後就能夠不斷的調用了。