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/
如果对本文有什么问题或疑问都可以在评论区留言，我看到后会尽量解答。
