js基础篇必看（点击事件轮播图的简单实现）
轮播图在以后的应⽤中还是⽐较常见的，不需要多少⾏代码就能实现。但是在只掌握了js基础知识的情况下，怎么来⽤较少的⽽且逻辑⼜简单的⽅法来实现呢？下⾯来分析下⼏种不同的做法：
1、利⽤位移的⽅法来实现
⾸先，我们可以在body中添加⼀个div并且将宽度设置成百分⽐（⾃适应页⾯），⽐例具体是相对谁的百分⽐的话按需求来做，在这⾥不多说。将图⽚放⼊到div 中。
其次，样式部分将img标签全部设置成absolute；以⽅便定位
最后，js部分说说逻辑，定义两个空数组，第⼀个数组⽤来保存初始的显⽰在页⾯的图⽚和等待进⼊的图⽚，第⼆个数组保存其余的n张图⽚，假设这两个数组分别设置为：waitToShow=[]; 和 goOut=[];  waitToShow.shift()；弹出第⼀张图⽚假如命名为showFirst，并为showFirst图⽚设置位移和移动时间，执⾏完成之后showFirst放⼊goOut尾部：goOut.push(showFirst);  这时waitToShow数组的第0个元素就变成原来的第⼆张要显⽰的图⽚，给这个图⽚waitToShow[0]设置位移和移动时间，并且将goOut数组的⾸元素图⽚弹出来，在放进waitToShow数组的尾部，保证waitToShow数组永远是⼀张显⽰的图⽚和待显⽰的图⽚，这样就通过两个数组形成了⼀个循环来完成轮播图的实现。反向的逻辑是⼀样的（由于逻辑过于复杂这⾥不推荐）
2、利⽤层级的⾼低来使最顶部图⽚变化的做法（这个做法没有位移的动作，但是逻辑却⾮常简便，很实⽤）
直接来代码更直观点：基本每⾏都有注释
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图 (闪现⾃适应)</title>
<style media="screen">
js实现轮播图最简代码* {
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 = ElementsByTagName('img');
var butLeft = ElementById('butLeft');
var butRight = ElementById('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;
// 向左的点击事件
// 从数组头部弹出⼀个图⽚元素
var showFirst = imagess.shift();
// 给弹出的这个图⽚元素设置层级，即－1000+count，
// 让层级相较其他元素是最⼩的，数组头部弹出的图⽚会显⽰在最底层
showFirst.style.zIndex = - index + count;
// 层级改变完成后再将他push进数组的尾部
imagess.push(showFirst);
// 点击⼀次加1，不⽤考虑具体的值，只需要有点击事件加 1
count++;
}
// 向右点击事件
/
/ 从imagess的尾部弹出⼀个元素，并赋值给showFirst
var showFirst = imagess.pop();
// 设置showFirst的层级为最⼤，1000+count ，这样他会显⽰在第⼀层
showFirst.style.zIndex = index + count;
// 层级改变之后将他在插⼊数组imagess的头部
imagess.unshift(showFirst);
// 点击⼀次加1
count++;
}
</script>
</html>
以上这篇js 基础篇必看(点击事件轮播图的简单实现)就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。