焦點輪播圖效果實現

　　焦點輪播圖相對前面講的逐幀輪播圖實現多了兩個功能，1、圖片輪播可以手動滾動（新增左右箭頭），這里重點是實現向左滾動的無縫連接。2、多了下方小圓點，指示圖片播放位置，並可以點擊小圓點跳轉。

　　那么如何實現呢？

　　1、無縫連接：

　　前面逐幀輪播圖向右滾動的無縫連接實現，是將最后一張圖片負值一個副本放在第一個位置。同理，實現向左無縫滾動，只需將第一張圖片負值一個副本放置在最后的位置即可。形成 5  1  2 3 4 5 1這樣的圖片排序。同樣將7張圖片放在一個div下，輪播時播放變換div位置即可。

HTML代碼如下：

<section class="container" id="container">
        <i id="leftPo"></i>
        <div class="imgs" id="imgs">
            <img src="../img/5.jpeg" alt="">
            <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="">
            <img src="../img/1.jpeg" alt="">
        </div>
        <i id="rightPo"></i>
        <ul id="oul"></ul>
    </section>

　css代碼如下：

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

        li {
            list-style: none;
        }

        .container {
            width: 800px;
            height: 600px;
            margin: 20px auto;
            position: relative;
            overflow: hidden;
            border: 3px double red;
            border-radius: 2%;
        }

        .imgs {
            position: absolute;
            display: flex;
            left: -800px;
        }

        #leftPo {
            display: inline-block;
            width: 30px;
            height: 30px;
            background-image: url('../img/left.png');
            position: absolute;
            top: 285px;
            left: 20px;
            z-index: 1;
            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: 285px;
            right: 20px;
            z-index: 1;
            cursor: pointer;
            opacity: 0;
            transition: all linear .5s
        }

        #oul {
            /* opacity: 0;
            transition: all linear .5s; */
            position: absolute;
            bottom: 20px;
            left: 350px;
            display: flex;
        }

        .circle {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: white;
            margin-left: 10px;
            cursor: pointer;
        }
    </style>

　　2、小圓點設置

　　首先創建小圓點（在前面css里面優先創建了一個類名為circle的樣式設置）：

            let imgs = document.getElementById('imgs');
            let oi = document.getElementsByTagName('I');
            let img = document.getElementsByTagName('IMG');
            let oul = document.getElementById('oul');
            let stopTimer1, stopTimer;
            // 創建圓圈
            for (let i = 0; i < img.length - 2; i++) {
                let newli = document.createElement('li');
                newli.className = 'circle';
                oul.appendChild(newli);
            } 
            let lis = document.getElementsByTagName('LI');
            // 初識第一張圖片顯示，給第一個圓圈選中樣式
            lis[0].style.width = '30px';
            lis[0].style.height = '30px';
            // 原點大小判斷
            let circle = function (lis) {
                for (let i = 0; i < lis.length; i++) {
                    if (i == (imgs.offsetLeft) / (-800)) {
                        lis[i].style.width = '30px';
                        lis[i].style.height = '30px';
                    } else if ((imgs.offsetLeft) / (-800) == -1 && i == 4) {
                        lis[i].style.width = '30px';
                        lis[i].style.height = '30px';
                    } else {
                        lis[i].style.width = '20px';
                        lis[i].style.height = '20px';
                    }
                }
            }            

　　在這里我給了1個初識值，即刷新頁面后顯示的第一張圖片，對應的第一個小圓點將變大。然后創建了一個變化小圓點的函數，方便后面調用。

　　然后給一個for循環，當小圓點點擊的時候，就跳轉到對應圖片上。

 // 循環判斷點擊
            for (let j = 0; j < lis.length; j++) {
                lis[j].onclick = function () {
                    imgs.style.left = -800 * j - 800 + 'px';
                    for (let i = 0; i < lis.length; i++) {
                        if (i == j) {
                            lis[i].style.width = '30px';
                            lis[i].style.height = '30px';
                        } else {
                            lis[i].style.width = '20px';
                            lis[i].style.height = '20px';
                        }
                    }
                }
            }

　　

　　3、div整體圖片移動函數建立，在這里給了函數一個參數speed，用於存儲移動的方向及速度。

           // 移動的回調函數
            let move1 = function (speed) {
                // 圖片輪播
                stopTimer1 = setInterval(function () {
                    imgs.style.left = imgs.offsetLeft + speed + 'px';
                    // 當第5張播放到 5圖片時，直接跳轉到位於第一個的備份 5圖片，這樣就造成了一直無空隙播放的假象
                    // 判斷的值 -4000為 5圖片前面 共計五張圖片的寬的和，然后直接跳轉到left為0.
                    if (imgs.offsetLeft <= -img[0].offsetWidth * (img.length - 2)) {
                        imgs.style.left = 0 + 'px';
                    } else if (imgs.offsetLeft >= 0) {
                        imgs.style.left = -img[0].offsetWidth * (img.length - 2) + 'px';
                    }
                    if (imgs.offsetLeft % img[0].offsetWidth == 0) {
                        clearInterval(stopTimer1);
                    }
                }, 10)
                circle(lis);
            }

　　4、建立整體移動的主函數，即程序入口。

 // 每隔7秒調用1次，7秒等於 圖片移動的4秒（800px，每10ms移動2px）+ 停頓的 3秒
            let moveAll = function () {
                let stopTimer = setInterval(function () {
                    rightPo.onclick();
                }, 7000);
                // 鼠標放在圖片區域時停止滾動、並且左右箭頭變為不透明，移開時移動，並且左右箭頭變為透明
                container.onmousemove = function () {
                    leftPo.style.opacity = '0.8';
                    rightPo.style.opacity = '0.8';
                    // oul.style.opacity = '0.8';
                    clearInterval(stopTimer);
                }
                container.onmouseout = function () {
                    leftPo.style.opacity = '0';
                    rightPo.style.opacity = '0';
                    // oul.style.opacity = '0';
                    moveAll();
                }
            }
            moveAll();

　　5、左右箭頭點擊跳轉，傳入方向和速度進行移動

// 點擊激活，每次點擊后先清除計時器，防止多次點擊同一個按鈕后亂竄
            leftPo.onclick = function () {
                clearInterval(stopTimer1);
                move1(20);
            }
            rightPo.onclick = function () {
                clearInterval(stopTimer1);
                move1(-20);
            }

　

 

 

 

 

完整代碼如下：

<!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>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .container {
            width: 800px;
            height: 600px;
            margin: 20px auto;
            position: relative;
            overflow: hidden;
            border: 3px double red;
            border-radius: 2%;
        }

        .imgs {
            position: absolute;
            display: flex;
            left: -800px;
        }

        #leftPo {
            display: inline-block;
            width: 30px;
            height: 30px;
            background-image: url('../img/left.png');
            position: absolute;
            top: 285px;
            left: 20px;
            z-index: 1;
            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: 285px;
            right: 20px;
            z-index: 1;
            cursor: pointer;
            opacity: 0;
            transition: all linear .5s
        }

        #oul {
            /* opacity: 0;
            transition: all linear .5s; */
            position: absolute;
            bottom: 20px;
            left: 350px;
            display: flex;
        }

        .circle {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: white;
            margin-left: 10px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <section class="container" id="container">
        <i id="leftPo"></i>
        <div class="imgs" id="imgs">
            <img src="../img/5.jpeg" alt="">
            <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="">
            <img src="../img/1.jpeg" alt="">
        </div>
        <i id="rightPo"></i>
        <ul id="oul"></ul>
    </section>
    <script>
        window.onload = function () {
            let imgs = document.getElementById('imgs');
            let oi = document.getElementsByTagName('I');
            let img = document.getElementsByTagName('IMG');
            let oul = document.getElementById('oul');
            let stopTimer1, stopTimer;
            // 創建圓圈
            for (let i = 0; i < img.length - 2; i++) {
                let newli = document.createElement('li');
                newli.className = 'circle';
                oul.appendChild(newli);
            }
            let lis = document.getElementsByTagName('LI');
            // 初識第一張圖片顯示，給第一個圓圈選中樣式
            lis[0].style.width = '30px';
            lis[0].style.height = '30px';
            // 原點大小判斷
            let circle = function (lis) {
                for (let i = 0; i < lis.length; i++) {
                    if (i == (imgs.offsetLeft) / (-800)) {
                        lis[i].style.width = '30px';
                        lis[i].style.height = '30px';
                    } else if ((imgs.offsetLeft) / (-800) == -1 && i == 4) {
                        lis[i].style.width = '30px';
                        lis[i].style.height = '30px';
                    } else {
                        lis[i].style.width = '20px';
                        lis[i].style.height = '20px';
                    }
                }
            }
            // 移動的回調函數
            let move1 = function (speed) {
                // 圖片輪播
                stopTimer1 = setInterval(function () {
                    imgs.style.left = imgs.offsetLeft + speed + 'px';
                    // 當第5張播放到 5圖片時，直接跳轉到位於第一個的備份 5圖片，這樣就造成了一直無空隙播放的假象
                    // 判斷的值 -4000為 5圖片前面 共計五張圖片的寬的和，然后直接跳轉到left為0.
                    if (imgs.offsetLeft <= -img[0].offsetWidth * (img.length - 2)) {
                        imgs.style.left = 0 + 'px';
                    } else if (imgs.offsetLeft >= 0) {
                        imgs.style.left = -img[0].offsetWidth * (img.length - 2) + 'px';
                    }
                    if (imgs.offsetLeft % img[0].offsetWidth == 0) {
                        clearInterval(stopTimer1);
                    }
                }, 10)
                circle(lis);
            }
            // 點擊激活，每次點擊后先清除計時器，防止多次點擊同一個按鈕后亂竄
            leftPo.onclick = function () {
                clearInterval(stopTimer1);
                move1(20);
            }
            rightPo.onclick = function () {
                clearInterval(stopTimer1);
                move1(-20);
            }
            // 每隔7秒調用1次，7秒等於 圖片移動的4秒（800px，每10ms移動2px）+ 停頓的 3秒
            let moveAll = function () {
                let stopTimer = setInterval(function () {
                    rightPo.onclick();
                }, 7000);
                // 鼠標放在圖片區域時停止滾動、並且左右箭頭變為不透明，移開時移動，並且左右箭頭變為透明
                container.onmousemove = function () {
                    leftPo.style.opacity = '0.8';
                    rightPo.style.opacity = '0.8';
                    // oul.style.opacity = '0.8';
                    clearInterval(stopTimer);
                }
                container.onmouseout = function () {
                    leftPo.style.opacity = '0';
                    rightPo.style.opacity = '0';
                    // oul.style.opacity = '0';
                    moveAll();
                }
            }
            moveAll();
            // 循環判斷點擊
            for (let j = 0; j < lis.length; j++) {
                lis[j].onclick = function () {
                    imgs.style.left = -800 * j - 800 + 'px';
                    for (let i = 0; i < lis.length; i++) {
                        if (i == j) {
                            lis[i].style.width = '30px';
                            lis[i].style.height = '30px';
                        } else {
                            lis[i].style.width = '20px';
                            lis[i].style.height = '20px';
                        }
                    }
                }
            }
        }
    </script>
</body>

</html>