轮播图完整代码详细解析，css+js+html完整代码，可直接复制粘贴使用，仅需改图片即可
这是一段使用HTML、CSS和JavaScript编写的图片轮播组件。它通过定时器实现自动播放图片，同时提供向左和向右的箭头按钮以手动切换图片。还包括一个圆圈导航，用于显示当前图片的索引，并且可以点击圆圈导航进行图片切换。
具体实现步骤如下：
- 获取相关元素：获取轮播图容器(images)、向左箭头按钮(arrow_l)、向右箭头按钮(arrow_r)、图片列表(ul)、圆圈导航(ol)等元素。
- 设置鼠标悬停和离开事件：当鼠标悬停在轮播图容器上时，显示箭头按钮，并清除定时器；当鼠标离开轮播图容器时，隐藏箭头按钮，并重新开启定时器。
- 动态生成圆圈导航：根据图片数量动态生成相应数量的圆圈导航，并为导航元素设置索引号（index）属性和点击事件。
- 克隆第一张图片：将第一张图片复制一份，并添加到图片列表的最后，以实现图片无缝滚动。
- 向右切换图片：点击向右箭头按钮时，判断是否滚动到最后一张图片，如果是，则将图片容器的left值快速复原为0，并将num重置为0，接着执行滚动动画；同时，圆圈导航也随之变化。
- 向左切换图片：点击向左箭头按钮时，判断是否滚动到第一张图片，如果是，则将图片容器的left值设置为倒数第二张图片的位置，并将num重置为最后一张图片的索引号，接着执行滚动动画；同时，圆圈导航也随之变化。
- 圆圈导航变化：通过循环遍历圆圈导航元素，将除当前导航以外的所有导航的class清空，为当前导航添加class，实现高亮效果。
- 自动播放轮播图：使用定时器实现自动切换轮播图，每隔一段时间调用向右切换图片的逻辑。
以上就是该轮播组件的实现步骤。你可以根据需要进行修改和扩展，例如调整样式、更换图片等。
<!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>
效果图
