js实现轮播图

最新推荐文章于 2026-04-22 03:26:55 发布

原创最新推荐文章于 2026-04-22 03:26:55 发布 · 689 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #html #css3

笔记专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何用JavaScript、HTML和CSS3创建一个轮播图。内容包括轮播图的实现效果描述、主要思路、具体实现代码以及参考视频链接。通过图片索引管理显示状态，左右箭头和圆点点击切换，以及定时器自动轮播和鼠标悬停暂停功能。

js实现轮播图

实现效果

在这里插入图片描述
左右箭头可以进行换图，圆点显示当前图片，也可以进行切换，当鼠标移到图片上时，图片停止轮播，移触图片外时，继续轮播。这个轮播图是通过图片的切换进行轮播，不是滑动轮播！

大体思路

1、其中根据图片索引index来存放当前展示的照片，展示的照片属性为：将圆点dot的id名设为active和图片img的display设为block，其它没有展示的图片对应的圆点id为“”空，图片img的display:none；
2、左/右箭头切换图片，通过添加监听事件实现点击切换，其中通过将display:none来让图片消失，将要展示的图片为display:block来显示；
3、圆点索引，是通过设置id名为active的实现当前图片所在；实现的功能第一个是点击切换，也是添加监听事件，通过给每个圆点赋予一个data-id属性来存放图片对应索引，当点击时通过getAttribute(“data-id”)需要切换照片的索引，然后进行1的操作；
4、定时器实现每隔两秒进行切换照片；
5、通过添加监听事件"mouseover"、“mouseout”实现鼠标在图片上停止轮播，鼠标移开继续轮播；而停止轮播就清除定时器clearInterval()。

实现代码

index.html
我这里就直接放body里面的代码了

<body>
    <div class="box">
        <!-- 图片 -->
        <div class="boximg">
            <div class="boxcontent" id="boxcontent1"><img src="./imgs/1.jpg" alt=""></div>
            <div class="boxcontent" id="boxcontent2"><img src="./imgs/2.jpg" alt=""></div>
            <div class="boxcontent" id="boxcontent3"><img src="./imgs/3.jpg" alt=""></div>
        </div>
        <div class="boxpointer">
            <span id="left">&lt;</span>
            <span id="right">&gt;</span>
        </div>
        <!-- 圆点导航 -->
        <div class="boxdots">
            <span class="dot" id="active"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </div>
    </div>
</body>

index.css

        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 600px;
            height: 400px;
            margin: 20px auto;
            position: relative;
            overflow: hidden;
        }

        .boximg {
            width: 600px;
            height: 400px;
            float: left;
            position: relative;
            z-index: 1;
        }

        img {
            width: 600px;
            height: 400px;
        }

        .boxpointer span {
            width: 40px;
            height: 40px;
            position: absolute;
            top: 50%;
            margin-top: -20px;
            text-align: center;
            line-height: 40px;
            font-weight: bold;
            font-family: Simsun;
            font-size: 30px;
            border: 1px solid #fff;
            opacity: 0.3;
            cursor: pointer;
            color: #fff;
            background: black;
            z-index: 2;
        }

        #left {
            left: 5px;
        }

        #right {
            left: auto;
            right: 5px;
        }

        .boxdots {
            position: absolute;
            right: 5px;
            bottom: 4px;
            z-index: 2;
        }

        .dot {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            margin-left: 4px;
            display: inline-block;
            background-color: white;
            box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
            cursor: pointer;
        }

        .boxdots span#active {
            background-color: rgb(247, 140, 140);
        }

index.js

        var index = 0,//默认第一张照片
            timer = null,//定时器记录
            img = document.getElementsByClassName("boxcontent"),//照片
            img_length = img.length,//记录照片的长度，方便使用
            box = document.getElementsByClassName("box")[0],//全局box，在鼠标覆盖停止、移出轮播时用到
            dot = document.getElementsByClassName("dot"),//圆点
            leftpointer = document.getElementById("left"),//左箭头
            rightpointer = document.getElementById("right");//右箭头

        //照片轮播，定时器实现
        function moveImg() {
            timer = setInterval(function () {
                index++;
                // console.log(index);
                if (index > img_length - 1) index = 0;
                for (var i = 0; i < img_length; i++) {
                    img[i].style.display = "none";
                    dot[i].id = ""
                }
                img[index].style.display = "block";
                dot[index].id = "active"
            }, 2000)
        }

        //停止轮播，即关闭定时器
        function stopImg() {
            if (timer)
                clearInterval(timer);
        }

        //右箭头
        function rightPointerChange() {
            index++;
            // console.log(index);
            if (index > img_length - 1) index = 0;
            for (var i = 0; i < img_length; i++) {
                img[i].style.display = "none";
                dot[i].id = ""
            }
            img[index].style.display = "block";
            dot[index].id = "active"
        }

        //左箭头
        function leftPointerChange() {
            index--;
            if (index < 0) index = img_length - 1;
            //先把全部的图片先display:none
            for (var i = 0; i < img_length; i++) {
                img[i].style.display = "none";
                dot[i].id = ""
            }
            img[index].style.display = "block";
            dot[index].id = "active"
        }

        //圆点索引，给每个span加上data-id属性来存放当前图片对应的索引，当点击时，获取其data-id，即可知道是第几张照片
        for (var d = 0; d < img_length; d++) {
            dot[d].setAttribute("data-id", d);
            dot[d].addEventListener("click", function () {
                index = this.getAttribute("data-id");
                for (var i = 0; i < img_length; i++) {
                    img[i].style.display = "none";
                    dot[i].id = "";
                }
                img[index].style.display = "block";
                dot[index].id = "active"
            }, false)
        }

        //一开始进来就先进行轮播图
        moveImg()

        leftpointer.addEventListener("click", leftPointerChange, false);//给左加上监听事件
        rightpointer.addEventListener("click", rightPointerChange, false);//给右加上监听事件

        box.addEventListener("mouseover", stopImg, false)//鼠标移到图片上面，停止轮播
        box.addEventListener("mouseout", moveImg, false)//鼠标移走，继续轮播