本文介绍在仅掌握JS基础知识的情况下，通过两种简单逻辑实现点击事件轮播图。第一种利用两个数组配合位移动画完成图片切换；第二种无需位移，通过动态调整图片z-index层级实现最顶部图片变化。代码包含完整HTML结构与注释，适合初学者参考学习。
轮播图在网页应用中十分常见，通常不需要编写大量代码即可实现。然而，对于仅掌握JavaScript基础知识的开发者而言，如何以逻辑简洁且代码量少的方案来实现这一功能，值得深入探讨。下文将分析几种不同的实现思路。
利用位移动画实现方案
第一种方案：利用位移动画实现
首先，在HTML的body标签内添加一个div容器，并将其宽度设置为百分比值以适应页面布局。具体的比例参照对象需根据实际需求确定，此处不再赘述。随后，将图片元素放入该div容器中。
其次，在CSS样式部分，将所有img标签的position属性设置为absolute，以便于进行精确定位和层叠控制。
最后，重点在于JavaScript部分的逻辑设计。定义两个空数组：第一个数组waitToShow用于保存当前显示在页面上的图片以及即将进入视野的图片；第二个数组goOut则用于保存其余n张待切换的图片。假设这两个数组分别初始化为waitToShow=[]和goOut=[]。执行逻辑如下：从waitToShow中弹出第一张图片，将其命名为showFirst，并为该图片设置位移效果及移动时间。待移动动画执行完毕后，将showFirst推入goOut数组的尾部：goOut.push(showFirst)。此时，waitToShow数组的第0个元素变为原本的第二张待显示图片。接着，为该图片（即waitToShow[0]）设置位移和移动时间，同时将goOut数组的首元素弹出，并推入waitToShow数组的尾部。通过这种方式，确保waitToShow数组始终包含一张正在显示或即将显示的图片，从而利用两个数组的交互形成一个循环，完成轮播图的实现。反向播放的逻辑与此类似，但由于逻辑较为复杂，此处不推荐采用此方案。
利用层级高低切换方案
第二种方案：利用层级高低切换最顶部图片（此方案无位移动作，但逻辑简便且实用）
直接查看代码更为直观，以下示例中每一行均附有详细注释。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图 (闪现 自适应)</title>
<style media="screen">
* {
margin: 0;
padding: 0;
}
.wrap {
width: 60%;
background: red;
margin: auto;
position: relative;
}
.wrap img {
width: 100%;
position: absolute;
/*z-index: 10;*/
}
input {
border: 1px solid lightgray;
width: 50px;
height: 30px;
background: red;
border-radius: 5px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="wrap">
<img src="img/01.jpg" alt="" />
<img src="img/02.jpg" alt="" />
<img src="img/03.jpg" alt="" />
<img src="img/04.jpg" alt="" />
</div>
<input type="button" id="butLeft" name="name" value="◀︎">
<input type="button" id="butRight" name="name" value="▶︎">
</body>
<script type="text/javascript">
// 获取images元素生成字符串数组，字符串数组不能进行push pop splice 等操作
// 所以要将它的值重新存放进一个数组中，后面有定义
var images = document.getElementsByTagName('img');
var butLeft = document.getElementById('butLeft');
var butRight = document.getElementById('butRight');
//获取变量index 用来为后面设置层级用
var index = 1000;
// 获取一个空的数组，用来存放images里面的字符串元素
var imagess = [];
// for循环用来给imagess数组赋值，并且改变数组中的元素的层级
for (var i = 0; i < images.length; i++) {
imagess[i] = images[i];
var currentImage = imagess[i];
// 当前图片的层级的设置，一轮for循环都为他们设置了初始的zIndex，图片越靠前，层级设置
// 要求越高，所以用的是－i,这样图片会按顺序从第一张，第二张.....依次向下
currentImage.style.zIndex = -i;
}
// 设置计数器count，执行一次点击事件（向左或者向右）count加1
var count = 0;
// 向左的点击事件
butLeft.onclick = function() {
// 从数组头部弹出一个图片元素
var showFirst = imagess.shift();
// 给弹出的这个图片元素设置层级，即 －1000+count，
// 让层级相较其他元素是最小的，数组头部弹出的图片会显示在最底层
showFirst.style.zIndex = - index + count;
// 层级改变完成后再将他push进数组的尾部
imagess.push(showFirst);
// 点击一次加1，不用考虑具体的值，只需要有点击事件加 1
count++;
}
// 向右点击事件
butRight.onclick = function() {
// 从imagess的尾部弹出一个元素，并赋值给showFirst
var showFirst = imagess.pop();
// 设置showFirst的层级为最大，1000+count ，这样他会显示在第一层
showFirst.style.zIndex = index + count;
// 层级改变之后将他在插入数组imagess的头部
imagess.unshift(showFirst);
// 点击一次加1
count++;
}
</script>
</html>
以上关于JavaScript基础篇中点击事件轮播图的简单实现内容即为全部分享，希望能为大家提供参考，也希望大家多多支持本站。