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

最新推荐文章于 2025-05-22 13:28:11 发布

BBBMouse

最新推荐文章于 2025-05-22 13:28:11 发布

阅读量486

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端基础学习笔记-JS 文章标签： JavaScript 图片轮播前端

本文链接：https://blog.youkuaiyun.com/weixin_41732430/article/details/86603449

前端基础学习笔记-JS 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了一个基于HTML、CSS和JavaScript实现的图片轮播功能，包括图片切换、上下翻页按钮及模式选择（正常模式与循环模式）。通过具体代码展示了如何动态控制图片显示，并在底部提供了控制按钮以改变展示模式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接贴上代码：

<!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'>&lt;</div>
        <div class='next'>&gt;</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>