【js案例】自动轮播图

isYangel

已于 2022-07-12 11:11:39 修改

阅读量116

点赞数

分类专栏：前端案例文章标签： javascript css css3 html5

于 2022-06-25 09:39:38 首次发布

本文链接：https://blog.csdn.net/qq_43283830/article/details/125455600

版权

前端案例专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用jQuery实现一个具有左右按钮和底部小圆点选择功能的自动轮播图。代码包括HTML结构、CSS样式和JavaScript功能，实现了图片无缝切换，并提供了鼠标悬停停止自动播放的功能。

摘要由CSDN通过智能技术生成

【js案例】自动轮播图

使用jQuery实现了图片自动轮播
有左右按钮和底部小圆点选择功能

源代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自动轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 500px;
            height: 500px;
            margin: 30px auto;
            position: relative;
            border: 1px solid #ccc;
            overflow: hidden;
        }

        /* 轮播图列表 */
        .box .img-list {
            width: 4000px;
            height: 500px;

            display: flex;
            list-style: none;

            position: absolute;
            left: 0;
            top: 0;
        }

        .box .img-list img {
            width: 500px;
            height: 500px;

            /* 放选中 */
            -webkit-user-select: none;
            -moz-user-select: none;
            -khtml-user-select: none;
            -ms-user-select: none;
        }

        /* 左右按钮 */
        .box .btn {
            width: 30px;
            height: 60px;
            background-color: rgba(184, 184, 184, 0.3);

            position: absolute;
            top: 50%;
            margin-top: -30px;

            line-height: 60px;
            text-align: center;
            font-size: 30px;
            color: aliceblue;

            /* 放选中 */
            -webkit-user-select: none;
            -moz-user-select: none;
            -khtml-user-select: none;
            -ms-user-select: none;
        }

        .box .btn:hover {
            background-color: rgba(156, 158, 158, 0.6);
            cursor: pointer;
            transition: all 0.5s;
        }

        .box .left-btn {
            left: 0;
        }

        .box .right-btn {
            right: 0;
        }

        /* 底部圆点 */
        .box .cir-list {
            width: 200px;
            height: 10px;
            position: absolute;
            bottom: 5px;
            left: 50%;
            margin-left: -100px;

            display: flex;
            justify-content: space-around;
            align-items: center;

            list-style: none;
        }

        .box .cir-list li {
            width: 10px;
            height: 10px;
            background-color: aliceblue;
            border-radius: 50%;
        }

        .box .cir-list li:hover {
            background-color: rgb(181, 207, 229);
            width: 30px;
            height: 8px;
            border-radius: 20%;
            transition: all 0.5s;
        }
    </style>
</head>

<body>
    <div class="box" id="box">
        <!-- 轮播图片列表 -->
        <ul class="img-list" id="imgList">
            <li><img src="./imgs/1.JPG" alt="" draggable="false"></li>
            <li><img src="./imgs/2.JPG" alt="" draggable="false"></li>
            <li><img src="./imgs/3.JPG" alt="" draggable="false"></li>
            <li><img src="./imgs/4.JPG" alt="" draggable="false"></li>
            <li><img src="./imgs/5.JPG" alt="" draggable="false"></li>
            <li><img src="./imgs/6.JPG" alt="" draggable="false"></li>
            <li><img src="./imgs/7.JPG" alt="" draggable="false"></li>
            <li><img src="./imgs/1.JPG" alt="" draggable="false"></li>
        </ul>
        <!-- 左右按钮 -->
        <div class="left-btn btn" id="leftBtn">&lt;</div>
        <div class="right-btn btn" id="rightBtn">&gt;</div>
        <!-- 底部圆点列表 -->
        <ul class="cir-list" id="cirList">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <script>
        var leftBtn = document.getElementById("leftBtn");
        var rightBtn = document.getElementById("rightBtn");
        var imgList = document.getElementById("imgList");
        var cirList = document.querySelectorAll(".cir-list li");
        var box = document.getElementById("box");

        // 记录当前展示图的下标
        var idx = 0;

        // 避免动画执行过程中 再次触发动画 设置lock
        var lock = true;


        /* 点击右按钮 */
        rightBtn.onclick = function () {
            if (!lock) {
                return;
            }
            lock = false;

            idx++;
            animate(imgList, { left: -500 * idx }, 1000, function () {
                console.log(idx);
                if (idx >= 7) {
                    idx = 0;
                    imgList.style.left = 0;
                }
                lock = true;
            })
        }



        /* 点击左按钮 */
        leftBtn.onclick = function () {
            if (!lock) {
                return;
            }
            lock = false;

            idx--;
            if (idx < 0) {
                idx = 7;
                imgList.style.left = "-3500px";
                idx--;
            }
            animate(imgList, { left: -500 * idx }, 1000, function () {
                console.log(idx);
                lock = true;
            })
        }



        /* 生成动画函数 */
        function animate(dom, cssObj, time, callback) {
            // 设定定时器间隔
            var interval = 20;
            // 动画执行总次数
            var allCount = time / interval;
            // preObj存入动画发生前的元素样式
            var preObj = {};
            // 获取动画发生前元素的所有样式
            var styleObj = getComputedStyle(dom);
            // 从styleObj取出已定义的属性放入preObj
            for (var i in cssObj) {
                preObj[i] = parseInt(styleObj[i]);
            }

            // 记录当前执行到第几次动画
            var count = 0;
            // 设置定时器
            var timer = setInterval(function () {
                count++;
                for (var i in cssObj) {
                    dom.style[i] = (cssObj[i] - preObj[i]) / allCount * count + preObj[i] + "px";
                }
                if (count >= allCount) {
                    clearInterval(timer);
                    callback(); //回调函数是作为参数传递给另一个函数的函数，并在其父函数完成后执行。
                }
            }, interval)
        }


        /* 小圆点的点击事件 */
        function cirClick(n) {
            cirList[n].onmouseenter = function () {
                if (!lock) {
                    return;
                }
                lock = false;

                idx = n;

                animate(imgList, { left: -500 * n }, 1000, function () {
                    lock = true;
                })
            }
        }
        for (var i = 0; i < cirList.length; i++) {
            cirClick(i);
        }


        /* 图片自动轮播 */
        var autotimer = setInterval(function () {
            rightBtn.onclick();
        }, 1000)

        box.onmouseenter = function () {
            clearInterval(autotimer);
        }
        box.onmouseleave = function () {
            autotimer = setInterval(function () {
                rightBtn.onclick();
            }, 1000)
        }

    </script>
</body>

</html>