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、利用层级的高低来使最顶部图片变化的做法（这个做法没有位移的动作，但是逻辑却非常简便，很实用）
直接来代码更直观点：基本每行都有注释
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>轮播图(闪现自适应)</title>
<stylemedia="screen">
*{
margin:0;
padding:0;
}
.wrap{
width:60%;
background:red;
margin:auto;
position:relative;
}
.wrapimg{
width:100%;
position:absolute;
/*z-index:10;*/
}
input{
border:1pxsolidlightgray;
width:50px;
height:30px;
background:red;
border-radius:5px;
font-size:20px;
}
</style>
</head>
<body>
<divclass="wrap">
<imgsrc="img/01.jpg"alt=""/>
<imgsrc="img/02.jpg"alt=""/>
<imgsrc="img/03.jpg"alt=""/>
<imgsrc="img/04.jpg"alt=""/>
</div>
<inputtype="button"id="butLeft"name="name"value="◀︎">
<inputtype="button"id="butRight"name="name"value="▶︎">
</body>
<scripttype="text/javascript">
//获取images元素生成字符串数组，字符串数组不能进行pushpopsplice等操作
//所以要将它的值重新存放进一个数组中，后面有定义
varimages=document.getElementsByTagName('img');
varbutLeft=document.getElementById('butLeft');
varbutRight=document.getElementById('butRight');
//获取变量index用来为后面设置层级用
varindex=1000;
//获取一个空的数组，用来存放images里面的字符串元素
varimagess=[];
//for循环用来给imagess数组赋值，并且改变数组中的元素的层级
for(vari=0;i<images.length;i++){
imagess[i]=images[i];
varcurrentImage=imagess[i];
//当前图片的层级的设置，一轮for循环都为他们设置了初始的zIndex，图片越靠前，层级设置
//要求越高，所以用的是－i,这样图片会按顺序从第一张，第二张.....依次向下
currentImage.style.zIndex=-i;
}
//设置计数器count，执行一次点击事件（向左或者向右）count加1
varcount=0;
//向左的点击事件
butLeft.onclick=function(){
//从数组头部弹出一个图片元素
varshowFirst=imagess.shift();
//给弹出的这个图片元素设置层级，即－1000+count，
//让层级相较其他元素是最小的，数组头部弹出的图片会显示在最底层
showFirst.style.zIndex=-index+count;
//层级改变完成后再将他push进数组的尾部
imagess.push(showFirst);
//点击一次加1，不用考虑具体的值，只需要有点击事件加1
count++;
}
//向右点击事件
butRight.onclick=function(){
//从imagess的尾部弹出一个元素，并赋值给showFirst
varshowFirst=imagess.pop();
//设置showFirst的层级为最大，1000+count，这样他会显示在第一层
showFirst.style.zIndex=index+count;
//层级改变之后将他在插入数组imagess的头部
imagess.unshift(showFirst);
//点击一次加1
count++;
}
</script>
</html>
以上这篇js基础篇必看(点击事件轮播图的简单实现)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。