轮播图的多种实现及原理

article/2025/9/23 12:12:53

【写在前面】

最近，在自己的项目中遇到了很多轮播图。

当然，这里的很多，并非数量多，指的是种类很多，即多种实现。

然后我觉得有不少小技巧，就决定写一篇文章讲解一下。

本篇主要内容：

1、轮播图的多种实现( 含动态图 )。

2、效果对比和更好的建议。

【正文开始】

实现一：

相当常见且简单的实现方法：

1、将所有的图片并排。

2、依次平移即可。

HMTL 和 CSS部分：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮播图</title><style>ul,ol {list-style: none;padding: 0px;margin: 0px;}#main {width: 600px;height: 350px;margin: 30px auto;position: relative;}#display {width: 600px;height: 350px;overflow: hidden;position: relative;-webkit-user-select: none;}#display ul {position: relative;left: 0;top: 0px;width: 3600px;height: 350px;transition: left 500ms linear;}#list li {float: left;width: 600px;height: 350px;}#arrow {display: none;}#arrow span {position: absolute;width: 40px;height: 40px;line-height: 40px;left: 5px;top: 50%;margin-top: -20px;background: #000;cursor: pointer;text-align: center;font-weight: bold;font-family: 黑体, SimHei;font-size: 30px;color: #fff;opacity: 0.4;border: 1px solid #fff;-webkit-user-select: none;}#arrow span:hover {opacity: 0.7;}#arrow #right {right: 5px;left: auto;}#index_container {position: absolute;width: 210px;height: 30px;right: 20px;bottom: 20px;}#index_container .index {float: left;width: 30px;height: 30px;line-height: 30px;text-align: center;opacity: 0.8;background: #fff;border: 1px solid #ccc;margin-left: 10px;cursor: pointer;-webkit-user-select: none;}#index_container .current {background: #ec3d3d;}</style><script></script>
</head>
<body><div id="main"><div id="display"><ul id="list"><li><img src="images/0.jpg" width="600" height="350"/></li><li><img src="images/1.jpg" width="600" height="350"/></li><li><img src="images/2.jpg" width="600" height="350"/></li><li><img src="images/3.jpg" width="600" height="350"/></li><li><img src="images/4.jpg" width="600" height="350"/></li></ul><ol id="index_container"></ol><div id="arrow"><span id="left" title="前一张"><</span><span id="right" title="后一张">></span></div></div></div>
</body>
</html>

其中 <script> 部分：

window.onload = () => {let list = document.getElementById('list');let ol = document.getElementsByTagName('ol')[0];let display = document.getElementById('display');let currentIndex = 0;let autoPlay = () => {window.autoPlay = true;window.autoPlayTimer = setInterval(() => move((currentIndex + 1) % 5), 2000);}let stopPlay = () => {if (window.autoPlay) {window.autoPlay = false;clearInterval(window.autoPlayTimer);}}//创建索引按钮for (let i = 0; i < 5; i++) {let li = document.createElement('li');li.textContent = String(i + 1);li.className = 'index';if (i == 0) li.className += ' current';li.index = i;ol.appendChild(li);li.addEventListener('mouseover', function() {move(this.index);stopPlay();});}let arrow = document.getElementById('arrow');let showArrow = () => arrow.style.display = 'block';let hideArrow = () => arrow.style.display = 'none';//核心move函数let move = (index) => {let width = display.offsetWidth;for (let i = 0; i < 5; i++) {//改变当前索引按钮if ((index % 5) === i) {ol.children[i].className = 'index current';} else ol.children[i].className = 'index';}//移动listslist.style.left = (-index) * width + 'px';currentIndex = index;}display.addEventListener('mouseover', showArrow)display.addEventListener('mouseleave', () => {hideArrow();if (!window.autoPlay) {//重新开始自动播放autoPlay();}})let left = document.getElementById('left');let right = document.getElementById('right');left.addEventListener('click', () => {move((currentIndex - 1) === -1 ? 4 : currentIndex - 1);stopPlay();});right.addEventListener('click', () => {move((currentIndex + 1) % 5);stopPlay();});//启动自动播放move(0);autoPlay();
}

关键部分为 move() 函数，即平移整个轮播图像列表( 根据跳转索引 index )。

效果如下：