1. 轮播图原理
轮播图的原理可以总结为两点：
- 定位的运用
- 定时器的运用
轮播图的每一张图横向依次排列。在最外层还有一个父级盒子，它的宽度刚好是一张图片的宽度，第一张图没有设置隐藏超出部分，第二张图隐藏了超出部分。
当我们的图片位置不断变化，让它出现在可视区域内，再加上一些动画，就变成了我们想要的轮播图了。
2. 实现效果
- 图片定时自动轮播
- 轮播有动画效果
- 点击左右切换按钮可以切换前一张后一张
- 点击图片对应的数字索引可以切换到对应图片
- 数字按钮点击有选中的效果
- 鼠标移入移出轮播图自动播放
3. 实现方式
3.1 HTML布局
HTML布局主要分为了三部分：左右切换按钮、图片列表、底部数字切换按钮。
💡代码实现
<div class="container">
<!-- 图片列表 -->
<ul class="ul-img">
<li class="li-img">1</li>
<li class="li-img">2</li>
<li class="li-img">3</li>
<li class="li-img">4</li>
<li class="li-img">5</li>
</ul>
<!-- 上一张、下一张按钮 -->
<div class="prev">
<span><</span>
</div>
<div class="next">
<span>></span>
</div>
<!-- 数字切换按钮 -->
<div class="num-box">
<ul class="num-ul">
<li data-index="0">1</li>
<li data-index="1">2</li>
<li data-index="2">3</li>
<li data-index="3">4</li>
<li data-index="4">5</li>
</ul>
</div>
</div>
给数字切换按钮的li标签添加了一个自定义属性，用来判断与哪一张图片对应，方便设置选中效果。
🖼️效果展示
3.2 JS代码
让轮播自动播放
// 获取元素节点
var containerDom = document.getElementsByClassName("container")[0]; // 容器
var ulDom = document.getElementsByClassName("ul-img")[0]; // 图片盒子
var prevDom = document.getElementsByClassName("prev")[0].firstElementChild; // 上一张按钮
var nextDom = document.getElementsByClassName("next")[0].firstElementChild; // 下一张按钮
var numUlDom = document.getElementsByClassName("num-ul")[0]; // 数字按钮父级容器
var numList = document
.getElementsByClassName("num-ul")[0]
.getElementsByTagName("li"); // 数字切换按钮列表
// 定义全局变量
var currentIndex = 0; // 当前显示的图片索引
var timer = null; // 自动播放定时器
numList[currentIndex].style.backgroundColor = "#ccc"; // 默认选中第一个数字
// 上一张
prevDom.addEventListener("click", prevFun);
// 下一张
nextDom.addEventListener("click", nextFun);
// 鼠标移入容器，停止自动播放
containerDom.addEventListener("mouseenter", stopAutoPlay);
// 鼠标移出容器，开启自动播放
containerDom.addEventListener("mouseleave", autoPlay);
// 数字按钮点击事件
numUlDom.addEventListener("click", numClick);
// 开启自动播放
autoPlay();
复制代码切换上一张
function prevFun() {
ulDom.style.transition = "0.5s";
numList[currentIndex].style.backgroundColor = ""; // 清空上一个按钮的样式
if (currentIndex === 0) {
ulDom.style.transition = "0s"; // 为了实现无缝滚动，清除动画
currentIndex = 4;
} else {
--currentIndex;
}
ulDom.style.left = `-${currentIndex * 600}px`;
numList[currentIndex].style.backgroundColor = "#ccc";
}
复制代码切换下一张
function nextFun() {
ulDom.style.transition = "0.5s";
numList[currentIndex].style.backgroundColor = ""; // 清空上一个按钮的样式
if (currentIndex === 4) {
ulDom.style.transition = "0s"; // 为了实现无缝滚动，清除动画
currentIndex = 0; // 重新播放第一张
} else {
++currentIndex;
}
ulDom.style.left = `-${currentIndex * 600}px`;
numList[currentIndex].style.backgroundColor = "#ccc"; // 设置按钮选中样式
}
复制代码当我们点击切换按钮，首先清除掉上一个数字按钮的选中样式，然后判断是否是最后一张图片或者第一张图片。声明了一个全局变量currentIndex用来存储当前展示的是第几张图片。通过currentIndex动态计算改变需要展示的图片的left距离。
点击数字按钮
function numClick(e) {
ulDom.style.transition = "0.5s";
let index = e.target.dataset.index;
if (index == undefined) {
return;
}
numList[currentIndex].style.backgroundColor = ""; // 清空上一个按钮的样式
currentIndex = Number(index);
numList[currentIndex].style.backgroundColor = "#ccc";
ulDom.style.left = `-${currentIndex * 600}px`;
}
复制代码循环播放
function autoPlay() {
timer = setInterval(nextFun, 1000);
}
复制代码关闭自动播放
function stopAutoPlay() {
// 清除定时器
clearInterval(timer);
}
复制代码3.3 CSS样式
需要将图片列表一行展示，并让最外层的盒子设置超出隐藏，数字按钮定位到对应的位置
💡代码实现
.container {
position: relative;
width: 600px;
height: 400px;
margin: 0 auto;
background-color: gray;
overflow: hidden;
}
.ul-img {
position: absolute;
display: flex;
width: 4200px;
height: 400px;
left: 0;
padding: 0;
margin: 0;
}
.li-img {
list-style: none;
width: 600px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
background-color: aquamarine;
font-size: 30px;
font-weight: 800;
border: 1px solid #ccc;
}
/* 上一张、下一张 */
.prev,
.next {
position: absolute;
height: 400px;
width: 80px;
display: flex;
justify-content: center;
align-items: center;
top: 0;
}
.prev {
left: 0;
}
.next {
right: 0;
}
.prev span,
.next span {
display: block;
color: #fff;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
cursor: pointer;
}
.num-box {
position: absolute;
left: 50%;
bottom: 20px;
transform: translate(-50%, 0);
z-index: 2;
}
.num-ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.num-ul li {
height: 20px;
width: 20px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
font-size: 9px;
color: #fff;
margin: 0 4px;
cursor: pointer;
user-select: none;
}
