焦點輪播圖效果實現

時間  2019-11-30
標籤 焦點 效果 實現 简体版
原文   原文鏈接

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

　　那麼如何實現呢？css

　　一、無縫鏈接：html

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

HTML代碼以下：app

<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>

　　二、小圓點設置flex

　　首先建立小圓點（在前面css裏面優先建立了一個類名爲circle的樣式設置）：ui

            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個初識值，即刷新頁面後顯示的第一張圖片，對應的第一個小圓點將變大。而後建立了一個變化小圓點的函數，方便後面調用。url

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

 // 循環判斷點擊
            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';
                        }
                    }
                }
            }

　　

　　三、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);
            }

　　四、創建總體移動的主函數，即程序入口。

 // 每隔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();

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

// 點擊激活，每次點擊後先清除計時器，防止屢次點擊同一個按鈕後亂竄
            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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程