轮播图完整代码详细解析，css+js+html完整代码，可直接复制粘贴使用，仅需改图片即可

轮播图完整代码详细解析，css+js+html完整代码，可直接复制粘贴使用，仅需改图片即可

这是一段使用HTML、CSS和JavaScript编写的图片轮播组件。它通过定时器实现自动播放图片，同时提供向左和向右的箭头按钮以手动切换图片。还包括一个圆圈导航，用于显示当前图片的索引，并且可以点击圆圈导航进行图片切换。

具体实现步骤如下：

1. 获取相关元素：获取轮播图容器(images)、向左箭头按钮(arrow_l)、向右箭头按钮(arrow_r)、图片列表(ul)、圆圈导航(ol)等元素。
2. 设置鼠标悬停和离开事件：当鼠标悬停在轮播图容器上时，显示箭头按钮，并清除定时器；当鼠标离开轮播图容器时，隐藏箭头按钮，并重新开启定时器。
3. 动态生成圆圈导航：根据图片数量动态生成相应数量的圆圈导航，并为导航元素设置索引号（index）属性和点击事件。
4. 克隆第一张图片：将第一张图片复制一份，并添加到图片列表的最后，以实现图片无缝滚动。
5. 向右切换图片：点击向右箭头按钮时，判断是否滚动到最后一张图片，如果是，则将图片容器的left值快速复原为0，并将num重置为0，接着执行滚动动画；同时，圆圈导航也随之变化。
6. 向左切换图片：点击向左箭头按钮时，判断是否滚动到第一张图片，如果是，则将图片容器的left值设置为倒数第二张图片的位置，并将num重置为最后一张图片的索引号，接着执行滚动动画；同时，圆圈导航也随之变化。
7. 圆圈导航变化：通过循环遍历圆圈导航元素，将除当前导航以外的所有导航的class清空，为当前导航添加class，实现高亮效果。
8. 自动播放轮播图：使用定时器实现自动切换轮播图，每隔一段时间调用向右切换图片的逻辑。

以上就是该轮播组件的实现步骤。你可以根据需要进行修改和扩展，例如调整样式、更换图片等。

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;

        }

        .images {
            width: 350px;
            height: 350px;
            position: relative;
            overflow: hidden;
        }

        ul {
            list-style-type: none;
            width: 600%;
            position: absolute;
        }

        ul li {
            float: left;
        }

        .images a {
            text-decoration: none;
            color: white;
            position: absolute;
            top: 175px;
            display: none;
            z-index: 999;
        }

        .arrow_l {
            left: 0;
            transform: translate(0, -50%);
        }

        .arrow_r {
            right: 0;
            transform: translate(0, -50%);
        }

        ol {
            list-style-type: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 350px;
            height: 350px;
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }

        ol li {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 1px solid white;
            /* float: left; */
            margin-left: 5px;
        }

        .current {
            background-color: white;
        }
    </style>
</head>

<body>
    <div class="images">
        <a href="javascript:;" class="arrow_l">向左</a>
        <a href="javascript:;" class="arrow_r">向右</a>
        <ul>
            <li><img src="./images/flame-girl1.jpg" alt=""></li>
            <li><img src="./images/flame-girl2.jpg" alt=""></li>
            <li><img src="./images/flame-girl3.jpg" alt=""></li>
            <li><img src="./images/flame-girl4.jpg" alt=""></li>
            <li><img src="./images/flame-girl5.jpg" alt=""></li>
            <!-- <li><img src="./images/flame-girl1.jpg" alt=""></li> -->
        </ul>
        <ol class="circle">
            <!-- <li></li>
            <li></li>
            <li></li>
            <li></li> -->
        </ol>
    </div>
    <script>
        // 思路
        // 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
        // 核心算法：(目标值-现在的位置)/10作为每次移动的距离 步长
        // 停止的条件是：让当前盒子位置等于目标位置就停止定时器
        function animate(obj, target, callback) {
            //先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer)//清除以前的定时器
            obj.timer = setInterval(function () {
                //步长值写到定时器的里面
                //把步长值改为整数 不要出现小数的问题
                var step = (target - obj.offsetLeft) / 10
                step = step > 0 ? Math.ceil(step) : Math.floor(step)
                if (obj.offsetLeft == target) {
                    //停止动画效果本质是停止定时器
                    clearInterval(obj.timer)


                    //如果有就调用，如果没有不执行
                    if (callback) {
                        //调用函数
                        callback()
                    }
                }
                obj.style.left = obj.offsetLeft + step + 'px'
            }, 15)
        }

        window.addEventListener('load', function () {
            var images = document.querySelector('.images')
            var arrow_l = document.querySelector('.arrow_l')
            var arrow_r = document.querySelector('.arrow_r')
            var moveWidth = images.offsetWidth
            images.addEventListener('mouseenter', function () {
                arrow_l.style.display = 'block'
                arrow_r.style.display = 'block'
                //鼠标经过，就清除定时器
                clearInterval(timer)
                timer = null//清除定时器变量
            })
            images.addEventListener('mouseleave', function () {
                arrow_l.style.display = 'none'
                arrow_r.style.display = 'none'
                //鼠标离开，再开启定时器
                timer = setInterval(function () {
                    //手动调用点击事件
                    arrow_r.click()
                }, 2000)
            })
            //动态生成小圆圈，有几个图片，就生成几个小圆圈
            var ul = images.querySelector('ul')
            var ol = images.querySelector('ol')
            for (var i = 0; i < ul.children.length; i++) {
                //创建li
                var li = document.createElement('li')
                //记录当前小圆圈的索引号,通过自定义属性
                li.setAttribute('index', i)
                //把li插入到ol里面
                ol.appendChild(li)
                //小圆圈的排他思想 我们可以直接在生成小圆圈的同时绑定点击事件
                li.addEventListener('click', function () {
                    //干掉所有人 把所有的li清除current类名
                    for (var i = 0; i < ol.children.length; i++) {
                        ol.children[i].className = ''
                    }
                    //留下我自己 当前的li设置current类名
                    this.className = 'current'
                    //点击小圆圈，移动的是ul
                    //移动的距离是小圆圈的索引号乘以图片的宽度 注意为负值
                    //当我们点击了某个li，我们就拿到当前li的索引号
                    var index = this.getAttribute('index')

                    //当我们点击了某个li 就把这个li的索引号给num
                    num = index
                    //当我们点击了某个li 就把这个li的索引号给circle
                    circle = index

                    animate(ul, -index * moveWidth)

                })
            }
            //ba0l里面的第一个li设置类名为current
            ol.children[0].className = 'current'
            //克隆第一张图片li放到ul最后面
            var first = ul.children[0].cloneNode(true)
            ul.appendChild(first)

            //点击右侧按钮，图片滚动一张
            //声明一个变量num，点击一次，自增1，让这个变量乘以图片的宽度，就是ul的滚动距离
            //图片无缝滚动原理：
            //把ul第一个li复制一份，放到ul的最后面
            //当图片滚动到克隆的最后一张图片时，让ul快速的、不做动画的跳到最左侧：left为0
            //同时num赋值为0，重新开始滚动就可以了
            var num = 0;

            //控制小圆圈的播放
            var circle = 0

            //右侧按钮做法
            arrow_r.addEventListener('click', function () {
                //如果走到了最后复制的一张图片，此时，我们的ul要快速复原，left值为0
                if (num == ul.children.length - 1) {
                    ul.style.left = 0
                    num = 0
                }
                num++
                animate(ul, -num * moveWidth)

                //点击右侧按钮，小圆圈跟随一起变化 可以在声明一个变量控制小圆圈的播放
                circle++
                //如果circle==ol.children.length 说明我们走到最后我们克隆的这张图片了 我们就复原
                if (circle == ol.children.length) {
                    circle = 0
                }
                circleChange()
            })
            //左侧按钮
            arrow_l.addEventListener('click', function () {
                //如果走到了第一张图片，此时，我们的ul要快速到倒数第一张
                if (num == 0) {
                    num = ul.children.length - 1
                    ul.style.left = -num * moveWidth + 'px'
                }
                num--
                animate(ul, -num * moveWidth)

                //点击右侧按钮，小圆圈跟随一起变化 可以在声明一个变量控制小圆圈的播放
                circle--
                //如果circle<0 说明我们走到第一张张图片了 我们就改为第5个小圆圈
                if (circle < 0) {
                    circle = ol.children.length - 1
                }
                circleChange()
            })
            function circleChange() {
                //先清除其余小圆圈的current类名
                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = ''
                }
                //留下当前小圆圈的current类名
                ol.children[circle].className = 'current'
            }
            //自动播放轮播图
            var timer = setInterval(function () {
                //手动调用点击事件
                arrow_r.click()
            }, 2000)
        })

    </script>
</body>

</html>

效果图