轮播图完整代码详细解析，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>
效果图
1126
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
