原生JS实现水平轮播动画图_js 水平卡片轮播-优快云博客

本文链接：https://blog.youkuaiyun.com/zzz18789/article/details/118441617

本文详细介绍了如何使用纯JavaScript构建一个具备自动轮播和手动切换功能的水平轮播图组件，包括点击左右按钮和底部小圆点控制图片展示。

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

原生JS实现水平轮播动画图

具有自动轮播、点击左右切换按钮切换图片、点击下方小圆点切换到对应图片功能

由于图片大小限制，只截取了这一段gif

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .slider {
            width: 500px;
            height: 300px;
            position: relative;
            margin: 50px auto;
            overflow: hidden;
        }

        .list {
            position: absolute;
        }

        .slider .list .item {
            width: 500px;
            height: 300px;
            float: left;
        }

        .slider .list .item img {
            width: 500px;
            height: 300px;
            display: block;
        }

        .slider .next, .slider .prev {
            position: absolute;
            top: 110px;
            background-color: white;
            opacity: .9;
            width: 30px;
            height: 80px;
            cursor: pointer;
            border: none;
        }

        .slider .next {
            right: 0;
        }

        .slider .pagination {
            position: relative;
            top: 260px;
            left: 190px;
        }

        .slider .pagination .bullet {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            margin-left: 5px;
            float: left;
            border: 3px solid white;
            cursor: pointer;

        }

        .slider .pagination .bullet.focus {
            background-color: black;
        }
    </style>
</head>
<body>
<div class="slider">
    <ul class="list">
        <li class="item"><img src="img/1.jpg" alt=""></li>
        <li class="item"><img src="img/2.jpg" alt=""></li>
        <li class="item"><img src="img/3.jpg" alt=""></li>
        <li class="item"><img src="img/4.jpg" alt=""></li>
    </ul>
    <button class="prev"> <</button>
    <button class="next"> ></button>
    <ul class="pagination">
        <li class="bullet focus"></li>
        <li class="bullet"></li>
        <li class="bullet"></li>
        <li class="bullet"></li>
    </ul>
</div>
<script src="animation.js"></script>
<script>
    (function () {
        var currIndex; //显示图片索引
        var lis; //所有的li
        var liWidth; //每个li的盒模型
        var len; //li的个数
        var id; //定时器

        init();

        //初始化函数
        function init() {
            currIndex = 1; //默认显示索引为1的图片
            //获取第一个和最后一个li并复制
            var li_1 = document.querySelector('.slider .list .item:first-of-type');
            var copy_1 = li_1.cloneNode(true);
            var li_last = document.querySelector('.slider .list .item:last-of-type');
            var copy_last = li_last.cloneNode(true);

            var list = document.querySelector('.slider .list'); //获取.list（ul）
            list.appendChild(copy_1); //在最后追加一个li标签（复制的第一个li）
            list.insertBefore(copy_last, li_1); //在第一个li前边复制插入原本最后那个li

            lis = document.querySelectorAll('.list .item'); //获取所有的li
            liWidth = lis[0].offsetWidth; //offsetWidth实际获取的是盒模型(width+border + padding)
            len = lis.length; //把li的个数赋值给len

            list.style.width = liWidth * len + 'px'; //ul标签的宽为li的宽*li的个数 （500*6=3000px）
            list.style.left = -liWidth + 'px'; //ul标签距离左边的距离为负的li的宽度（-500px，默认显示第一张图）

            document.querySelector('.prev').onclick = function () { //切换上一张按钮单击事件
                slidePrve();
            }
            document.querySelector('.next').onclick = function () { //切换下一张按钮单击事件
                slideNext();
            }

            var bullets = document.querySelectorAll('.slider .pagination .bullet'); //获取所有的圆点
            for (var i = 0; i < bullets.length; i++) { //循环给圆点添加对应的索引值
                bullets[i].index = i;
                bullets[i].onclick = function () { //给每个圆点添加单击事件
                    //图片索引为点击的圆点索引加1（点击索引1的圆点，显示1+1=2的图片索引，即第二张图片）
                    currIndex = this.index + 1;
                    slideTo(currIndex); //调用效果实现函数
                }
            }

            document.querySelector('.slider').onmouseover=function () { //鼠标移动到div上停止自动轮播
                stop();
            }
            document.querySelector('.slider').onmouseout=function () { //鼠标移开div开始自动轮播
                auto();
            }
            auto(); //默认开启自动轮播
        }

        //切换上一张函数
        function slideNext() {
            currIndex++; //图片索引+1
            slideTo(currIndex); //传值给效果实现函数
        }

        //切换下一张函数
        function slidePrve() {
            currIndex--;
            slideTo(currIndex);
        }

        //效果实现函数
        function slideTo(index) {
            var list = document.querySelector('.slider .list'); //获取.list（ul）
            /*
            * 图片形式为 4 1 2 3 4 1 个数为6，索引值为 0 1 2 3 4 5，其中索引1和5是第一张，0和4是最后一张
            * 当索引值为5时，点击下一张索引值就会变为6，达成if条件 index===len
            * 则把索引值改为2，即第二张图片
            * 修改左边距离为 -500px（直接跳转到第一张图 索引1，然后动画效果移动到第二张）
            *
            * 下面两处判断中 currIndex值为 -1 0 1 2 3 4 5 6 ，其中-1和6都是达成了if条件
            * */
            if (index === len) {
                currIndex = index = 2;
                list.style.left = -liWidth + 'px';
            }
            /*
                当索引值为0时，此时点击上一张，索引值会变为-1.达成if条件，index===-1
                此时把索引值更改为6-3=3 显示第三张图片
                修改left为-2000px（直接跳转到第四张图，索引4，然后动画效果移动到第三张）
            */
            if (index === -1) {
                currIndex = index = len - 3;
                list.style.left = -(len - 2) * liWidth + 'px';
            }
            //圆点背景对应图片位置
            var focusIndex; //圆点索引 从0开始，0 1 2 3
            var bullets = document.querySelectorAll('.pagination .bullet'); //获取所有圆点
            if (index === 0) { //如果图片索引为0（此时显示的图片为第四张）
                focusIndex = bullets.length - 1; //显示背景色的圆点索引改为圆点个数减1，即第三个圆点，对应第三张图片
            } else if (index === len - 1) { //如果索引为图片个数减1.即5，此时显示的是第一张图片
                focusIndex = 0; //则把显示背景色的圆点索引改为0（即第一个圆点）
            } else { //显示的图片索引为1 2 3 4时
                focusIndex = index - 1; //显示背景色的圆点索引为图片索引减1
            }

            document.querySelector('.focus').className = 'bullet'; //把class值为focus的标签改回bullet
            bullets[focusIndex].className = 'bullet focus'; //把对应圆点索引的class改成bullet focus（带背景色css属性的）

            var left = -index * liWidth; //修改left值为负的索引*宽度（500px）
            animate(list, { //调用动画函数 修改left值为变量left
                left: left
            })
        }

        //自动轮播函数
        function auto() {
            clearInterval(id); //每次启动定时器时先清除定时器，防止每次启动都新增一个定时器
            id=setInterval(function () { //每两秒调用一次切换下一张图片函数
                slideNext();
            },2300);
        }

        //停止轮播函数
        function stop() {
            clearInterval(id);
        }
    })()
</script>
</body>
</html>