JS案例手动轮播图正常模式与循环模式

古城微笑少年丶 2022-04-23 01:48 131阅读 0赞

直接贴上代码：

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <meta name="Author" content="Fly">
        <title>TZ-作业-图片点击切换</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                font-family: Microsoft yahei, serif;
            }
    
            #banner {
                overflow: hidden;
                position: relative;
                width: 600px;
                height: 375px;
                margin: 50px auto;
                border: 1px solid #ccc;
                border-radius: 10px;
            }
    
            #banner ul li {
                display: none;
                position: absolute;
                list-style: none;
            }
    
            #banner ul li img {
                width: 100%;
            }
    
            #banner p {
                position: absolute;
                width: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                line-height: 25px;
                text-align: center;
                color: #fff;
            }
    
            #banner p.top {
                top: 0;
            }
    
            #banner p.bottom {
                bottom: 0;
            }
    
            #banner div {
                position: absolute;
                top: 50%;
                width: 40px;
                margin-top: -15px;
                background-color: rgba(0, 0, 0, 0.5);
                text-decoration: none;
                color: #fff;
                font-size: 20px;
                line-height: 30px;
                text-align: center;
            }
    
            #banner div.prev {
                left: 0;
    
            }
    
            #banner div.next {
                right: 0;
    
            }
    
            .btnBar {
                position: relative;
                width: 600px;
                margin: 50px auto;
                text-align: center;
            }
    
            .btnBar button {
                padding: 10px;
                background-color: #ccc;
                border: 1px solid grey;
                border-radius: 10px;
                outline: none;
                box-shadow: 0 0 20px #ccc inset;
            }
    
            .btnBar button.active {
                background-color: red;
                color: #fff;
            }
    
            #banner .show {
                display: block;
            }
        </style>
    </head>
    
    <body>
        <div id="banner">
    
            <ul>
                <li class="show">
                    <img src="images/1.jpg" alt="">
                </li>
                <li>
                    <img src="images/2.jpg" alt="">
                </li>
                <li>
                    <img src="images/3.jpg" alt="">
                </li>
                <li>
                    <img src="images/4.jpg" alt="">
                </li>
                <li>
                    <img src="images/5.jpg" alt="">
                </li>
            </ul>
            <p class='top'>1/5</p>
            <p class='bottom'>植物</p>
            <div class='prev'><</div>
            <div class='next'>></div>
    
        </div>
        <div class="btnBar">
            <button class='active'>正常模式</button>
            <button>循环模式</button>
        </div>
    
        <script>
            let aBtn = document.querySelectorAll(".btnBar button");
            let aLi = document.querySelectorAll("#banner li");
            let oTop = document.getElementsByClassName("top")[0];
            let oBot = document.getElementsByClassName("bottom")[0];
            let oPrev = document.getElementsByClassName("prev")[0];
            let oNext = document.getElementsByClassName("next")[0];
            let num = 0;
            let onOff = true;  // true代表 正常模式
            let oldLi = aLi[num] //第一张  标记的是 即将要取消类名的旧 li
            let arr = ["植物", "植物大战僵尸", "僵尸", "豌豆射手", "坚果"]
    
    
            aBtn[0].onclick = function () {//正常模式
                aBtn[0].classList.add("active") //赋予正常按钮类名
                aBtn[1].classList.remove("active") //取消循环按钮类名
                onOff = true; //更换开关状态 
    
            }
            aBtn[1].onclick = function () { //循环模式 
                aBtn[1].classList.add("active")
                aBtn[0].classList.remove("active")
                onOff = false;
            }
    
            function run() {
                oldLi.classList.remove("show") //每次取消上一次的li 
                oldLi = aLi[num]; //是把 oldLi 更新为当前的 li
                aLi[num].classList.add("show")
                oTop.innerHTML = `${num + 1}/5`
                oBot.innerHTML = arr[num];
            }
    
            oNext.onclick = function () {
                num++; //num  = 1
                if (num > 4) {//到序号为4(最后一张)再往下点时 
                    /* if (onOff) {//正常模式 
                        num = 4
                    } else {
                        num = 0
                    } */
    
                    onOff ? num = 4 : num = 0
                }
    
                run()
            }
    
            oPrev.onclick = function () {
                num--; //num  = 1
                if (num < 0) {//到序号为4(最后一张)再往下点时 
                    /* if (onOff) {//正常模式 
                        num = 0
                    } else {
                        num = 4
                    } */
                    onOff ? num = 0 : num = 4
                }
    
                run()
            }
    
    
        </script>
    </body>
    
    </html>