使用JavaScript实现手动轮播图-优快云博客

本文链接：https://blog.youkuaiyun.com/ScumStudy/article/details/109134175

本文详细介绍了如何使用纯JavaScript来创建一个手动控制的轮播图效果，包括图片切换、按钮控制、指示器显示等功能，帮助开发者掌握JavaScript在动态网页交互中的应用。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wrap {
            position: relative;
            width: 1126px;
            height: 580px;
            margin: 200px auto 0;
            background-color: aqua;
            position: relative;
        }
        
        #wrap .img {
            width: 100%;
            height: 100%;
            background-color: bisque;
        }
        
        #wrap .img img {
            opacity: 0;
            width: 100%;
            height: 100%;
            position: absolute;
        }
        
        #wrap .img img.show {
            opacity: 1;
        }
        
        #wrap a {
            height: 50px;
            width: 50px;
            display: inline-block;
            text-align: center;
            background-color: rgba(0, 0, 0, .5);
            text-decoration: none;
            font-size: 30px;
            color: white;
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
        }
        
        #wrap a.left {
            left: 0;
        }
        
        #wrap a.right {
            right: 0;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <div class="img">
            <img src="./img/dessert_10.jpg" class="show" />
            <img src="./img/dessert_11.jpg" />
            <img src="./img/dessert_12.jpg" />
            <img src="./img/dessert_6.jpg" />
            <img src="./img/dessert_9.jpg" />
        </div>
        <div class="arrow">
            <a href="javascript:;" class="left">&lt;</a>
            <a href="javascript:;" class="right">&gt;</a>
        </div>
    </div>
    <script>
        let oLeft = document.querySelector("#wrap .arrow .left");
        let oRight = document.querySelector("#wrap .arrow .right");
        let aImg = document.querySelectorAll("#wrap .img img");
        let len = aImg.length;
        let index = 0;
        oRight.onclick = function() {
            if (index < len - 1) {
                aImg[index].classList.remove("show");
                index++;
                aImg[index].classList.add("show");
            }
        };
        oLeft.onclick = function() {
            if (index > 0) {
                aImg[index].classList.remove("show");
                index--;
                aImg[index].classList.add("show");
            }
        }
    </script>
</body>

</html>

JS手动轮播图