純JS寫的輪播圖！（有自動輪播，手動左右點擊，點擊小點切換圖片）

原創

2020-02-22 11:41

圖片寬爲340px，高爲490px，，，當時寫的時候把代碼寫死了，只支持這個的大小的圖片

<!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>輪播圖</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #boxAll {
            width: 340px;
            height: 490px;
            margin: 20px auto;
            position: relative;
            overflow: hidden;
        }

        .ulCss {
            height: 490px;
            width: 3400px;
            list-style: none;
            position: absolute;
        }

        #boxAll>ul>li>img {
            display: block;
            float: left;
        }

        #leftBtn,
        #rightBtn {
            font-size: 40px;
            line-height: 40px;
            position: absolute;
            color: white;
            cursor: pointer;

        }

        #leftBtn {
            top: 40%;
            left: 0;
        }

        #rightBtn {
            right: 0;
            top: 40%;
        }

        .dot {
            width: 200px;
            height: 30px;

            position: absolute;
            bottom: 0;
            left: 70px;
            display: flex;
            justify-content: space-evenly;
            align-items: center
        }

        .dot>p {
            width: 10px;
            height: 10px;
            background: #fff;
            float: left;
            border-radius: 50%;
            cursor: pointer;
        }

        #active {
            background: cyan;
        }
    </style>
</head>

<body>
    <div id="boxAll">
        <ul class="ulCss">
            <li><img src="../images/lunbo01.jpg" alt=""></li>
            <li><img src="../images/lunbo02.jpg" alt=""></li>
            <li><img src="../images/lunbo03.jpg" alt=""></li>
            <li><img src="../images/lunbo04.jpg" alt=""></li>
            <li><img src="../images/lunbo05.jpg" alt=""></li>
            <li><img src="../images/lunbo06.jpg" alt=""></li>
            <li><img src="../images/lunbo07.jpg" alt=""></li>
            <li><img src="../images/lunbo08.jpg" alt=""></li>
            <li><img src="../images/lunbo09.jpg" alt=""></li>
            <li><img src="../images/lunbo01.jpg" alt=""></li>
        </ul>
        <div id="leftBtn">&lt;</div>
        <div id="rightBtn">&gt;</div>
        <div class="dot">
            <p id="active"></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </div>
    </div>
    <p></p>
    <script src="../封裝函數/JS動畫封裝函數.js"></script>
    <script>

        var rightBtn = document.getElementById("rightBtn")
        var leftBtn = document.getElementById("leftBtn")
        var ul = document.querySelector("ul")
        var li = document.querySelectorAll("li")
        var dot = document.querySelectorAll(".dot>p")
        var count = 0;
        var isLock = true;
        var interval = 1000;
        function fun() {
            if (!isLock) {
                return;
            }
            isLock = false;
            count++;
            if (count == li.length) {
                ul.style.left = "0px";
                count = 1;
                animation(ul, { left: -340 * count }, 1000, function () { isLock = true })
            }
            animation(ul, { left: -340 * count }, 1000, function () { isLock = true })
            //   console.log(count)  
            for (var i = 0; i < dot.length; i++) {
                dot[i].id = ""
            }
            if (count == 9) {
                dot[0].id = "active"
            } else {
                dot[count].id = "active"
            }
        }
        rightBtn.onclick = fun
        leftBtn.onclick = function () {
            if (!isLock) {
                return;
            }
            isLock = false;
            count--;
            //   console.log(count)  
            if (count < 0) {
                ul.style.left = "-3060px";
                count = li.length - 2;
                animation(ul, { left: -340 * count }, 1000, function () { isLock = true })

            }
            animation(ul, { left: -340 * count }, 1000, function () { isLock = true })
            for (var i = 0; i < dot.length; i++) {
                dot[i].id = ""
            }
            // console.log(count)
            dot[count].id = "active"
        }
        for (var i = 0; i < dot.length; i++) {
            dot[i].idx = i;
            dot[i].onclick = function () {
                for (var j = 0; j < dot.length; j++) {
                    dot[j].id = ""
                }
                dot[this.idx].id = "active";
                count = this.idx;  //將當前count的值變成小點的值   

                animation(ul, { left: -340 * this.idx }, (this.idx + 1) * 100)

            }
        }

        var timer = setInterval(function () {
            fun()

        }, 2000)
        boxAll.onmouseover = function () {
            clearInterval(timer)

        }
        boxAll.onmouseout = function () {
            timer = setInterval(function () {
                fun()
            }, 2000)
        }
        // οndragstart=function(){
        //     return false
        // }
        // οncοntextmenu=function(){
        //     return false
        // }
        // ul.onmousedown = function(){
        //     ul.style.cursor="pointer"
        // }
        // ul.onmouseup = function(){
        //     ul.style.cursor=""
        // }

    </script>

</body>