51工具盒子轮播图是网站中常见的一种展示方式，一般常用于：电商网站、新闻网站、企业官网 等。轮播图也是前端开发必须掌握的基础。这里就用 CSS3 + 原生 JavaScript 实现一个简单的轮播图。
注意！因为使用了 CSS3 ，所以不能在 IE10 以下的浏览器运行。
代码
HTML：
<div id="box">
<div id="img-box">
<a href="#">
<img src="https://img.alicdn.com/tfs/TB1kQJodeP2gK0jSZFoXXauIVXa-520-280.jpg_q90_.webp" alt="轮播图1">
</a>
<a href="#">
<img src="https://img.alicdn.com/simba/img/TB1PkttegaH3KVjSZFjSuwFWpXa.jpg" alt="轮播图2">
</a>
<a href="#">
<img src="https://img.alicdn.com/simba/img/TB16WIIc9f2gK0jSZFPSutsopXa.jpg" alt="轮播图3">
</a>
<a href="#">
<img src="https://img.alicdn.com/simba/img/TB1XK9eX9f2gK0jSZFPSutsopXa.jpg" alt="轮播图4">
</a>
<a href="#">
<img src="https://img.alicdn.com/tfs/TB1YE7gcW61gK0jSZFlXXXDKFXa-520-280.jpg_q90_.webp" alt="轮播图5">
</a>
</div>
<!--切换图片的按钮，每个按钮对应一张图片-->
<div id="btn-box">
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
</div>
<!--切换上一张和下一张图片的按钮-->
<div role="button" aria-label="上一张" id="previous"><</div>
<div role="button" aria-label="下一张" id="next">></div>
</div>
这里使用了 5 张 图片，img 的图片地址是在淘宝上随便找的。
CSS：
/*清除所有的margin和padding*/
*{
margin: 0;
padding: 0;
}
/图片框/
#box{
width: 520px;
height: 280px;
overflow: hidden;
position: relative;
margin: 20px auto;
}
#img-box{
width: 2600px;
height: 280px;
position: absolute;
left: 0;
top: 0;
transform: translate(0px, 0);
transition: 0.4s;
}
/图片链接/
#img-box a{
float: left;
}
/切换图片的按钮/
#btn-box{
width: 100px;
height: 20px;
position: absolute;
bottom: 5px;
left: 50%;
display: flex;;
transform: translate(-50%, 0);
}
#btn-box .btn{
width: 12px;
height: 12px;
background: #ffffff;
border-radius: 50%;
margin: auto;
}
/切换上一张和下一张图片的按钮/
#previous,#next{
width: 30px;
height: 30px;
background: rgba(0, 0, 0, 0.5);
font-size: 20px;
line-height: 30px;
text-align: center;
border: none;
color: #ffffff;
position: absolute;
top: 50%;
transform: translate(0 , -50%);
}
#previous{
left: 0;
}
#next{
right: 0;
}
这里的轮播动画使用的是 CSS3 的 transition，动画时间为 0.4 秒。
下面是轮播图的外观效果：
下面的 5 个 圆形按钮分别对应 5 张图片。
JS：
let imgBox = document.querySelector('#img-box'); // 需要移动的图片框
let btn = document.querySelectorAll('.btn'); // 切换图片的按钮
let previousBtn = document.querySelector('#previous'); // 切换上一张的按钮
let nextBtn = document.querySelector('#next'); // 切换下一张的按钮
let imgW = -520; // 单张图片的宽度，因为图片框是向左移动的，用负数更方便计算
let imgNum = 0; // 当前显示的图片序号
// 切换下一张图片的按钮点击
nextBtn.onclick = () => {
imgNum ++;
if (imgNum >= btn.length) {
imgNum = 0;
}
btn[imgNum].click(); // 根据图片序号调用对应的按钮点击
};
// 切换上一张图片的按钮点击
previousBtn.onclick = () => {
imgNum --;
btn[imgNum].click(); // 根据图片序号调用对应的按钮点击
if (imgNum <= 0) {
imgNum = 5;
}
};
// 设置定时器
setInterval(() => {
if (imgNum >= btn.length) {
imgNum = 0;
}
btn[imgNum].click(); // 根据图片序号调用对应的按钮点击
imgNum ++;
}, 600);
for (let i = 0;i < btn.length;i ++) {
btn[i].index = i; // 给每一个按钮添加一个对应的索引
// 切换图片的按钮点击
btn[i].onclick = ev => {
imgBox.style.transform = 'translate(' + ev.target.index * imgW + 'px)';
btnActive(ev.target.index); // 调用设置按钮选中状态的函数
imgNum = i; // 让当前显示的图片序号 = 当前按钮的序号
};
}
btnActive(0); // 调用设置按钮选中状态的函数
// 设置按钮选中状态的函数
function btnActive(btnIndex = 0) {
for (let i = 0;i < btn.length;i ++) {
btn[i].style.background = '#ffffff';
}
btn[btnIndex].style.background = '#FF5000';
}
因为没有用到任何框架和库，所以看上去代码会有点多，实际上很简单。
如果用 jQuery 的话会更简单。
效果展示
点击顺序切换按钮：
点击下方的圆形按钮：
自动轮播：
这里因为要缩短 gif 的录制时间，所以自动轮播的定时器设置为 0.6 秒，一般自动轮播的间隔时间差不多在 5 秒 左右。
代码说明
JavaScript 使用了一部分 ES6 的语法，如果要在 IE 运行需要转换为 ES5 语法。
我这里使用的是 CSS3 的 transition 动画，对于 IE10 以下的浏览器是不兼容的。如果需要兼容老的 IE 浏览器 就需要用 JS 的定时器来实现动画，不过在流畅度方便可能不如 CSS 3 的 transition 动画。
版权声明：本文为原创文章，版权归 Mr. Ma's Blog 所有，转载请联系博主获得授权。
本文地址：https://www.misterma.com/archives/815/
如果对本文有什么问题或疑问都可以在评论区留言，我看到后会尽量解答。
