首页 > 代码库 > js 基础篇（点击事件轮播图的实现）
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">* {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加1var count = 0;// 向左的点击事件butLeft.onclick = function() {// 从数组头部弹出一个图片元素var showFirst = imagess.shift();// 给弹出的这个图片元素设置层级，即 －1000+count，// 让层级相较其他元素是最小的，数组头部弹出的图片会显示在最底层showFirst.style.zIndex = - index + count;// 层级改变完成后再将他push进数组的尾部imagess.push(showFirst);// 点击一次加1，不用考虑具体的值，只需要有点击事件加 1count++;}// 向右点击事件butRight.onclick = function() {// 从imagess的尾部弹出一个元素，并赋值给showFirstvar showFirst = imagess.pop();// 设置showFirst的层级为最大，1000+count ，这样他会显示在第一层showFirst.style.zIndex = index + count;// 层级改变之后将他在插入数组imagess的头部imagess.unshift(showFirst);// 点击一次加1count++;}</script></html>
这是我做的另一个实例：实例2：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title></title> <meta charset="utf-8"/></head><style type="text/css"> *{ padding: 0px; margin: 0px; } @font-face { font-family: myfont; src:url(font/iconfont.woff); } .tb{ font-family:myfont; font-size: 60px; margin-top: 120px; } #banner{ border: 1px solid red; width: 1200px; height: 600px; margin: 0 auto; background-image: url("background.jpg"); } #container{ /*border: 1px solid blue;*/ width: 980px; /*height: 100%;*/ overflow: hidden; margin: 0 auto; /*margin-top: 50px;*/ position: relative; } #top{ height: 70px; width: 980px; background-image: url("topbg.png"); margin: 0 auto; /*margin-top:20px;*/ } #bottom{ height: 70px; width: 980px; background-image: url("topbg.png"); margin: 0 auto; margin-top: -30px; } ul{ width: 6860px; height: 100%; position: relative; } ul li{ list-style-type: none; float:left; } #prev{ position: absolute; left: 470px; top: 80px; color:white; /*border: 1px solid red;*/ border-radius: 100px 100px 100px 100px; background-color: rgba(0,0,0,0.5); height: 100px; line-height: 100px; width: 100px; text-align: center; } #next{ position: absolute; top: 80px; right: 470px; color: white; /*border: 1px solid red;*/ border-radius: 100px 100px 100px 100px; background-color: rgba(0,0,0,0.5); height: 100px; line-height: 100px; width: 100px; text-align: center; }</style><body> <div id="banner"> <div id="top"></div> <div id="container"> <ul id="show"> <li><img src="1.jpg"/></li> <li><img src="2.jpg"/></li> <li><img src="4.jpg"/></li> <li><img src="5.jpg"/></li> <li><img src="6.jpg"/></li> <li><img src="7.jpg"/></li> <li><img src="8.jpg"/></li> </ul> </div> <div id="bottom"></div> </div> <a class="tb" id="prev"></a> <a class="tb" id="next"></a><script type="text/javascript">// var page = 1, i = 1; var nextBtn = document.getElementById("next"); var prevBtn = document.getElementById("prev"); var showPart = document.getElementById("show");//获得显示区域 var tu = showPart.getElementsByTagName("li");//获得图片列表 tu[0].parentNode.style.left=0+"px"; nextBtn.onclick = function(){ var zhiz=parseFloat(tu[0].parentNode.style.left); if(zhiz>-5880){ tu[0].parentNode.style.left=-980+zhiz+"px"; tu[0].parentNode.style.transition="all 1s linear" }else{ tu[0].parentNode.style.transition="" tu[0].parentNode.style.left=0+"px"; } } prevBtn.onclick = function(){ var zhiy=parseFloat(tu[0].parentNode.style.left); console.log(zhiy) if(zhiy<0){ tu[0].parentNode.style.left=980+zhiy+"px"; console.log(zhiy) tu[0].parentNode.style.transition="all 1s linear" }else{ tu[0].parentNode.style.transition="" tu[0].parentNode.style.left=-5880+"px"; } }</script></body></html>
只需将图片的路径改变就OK了
js 基础篇（点击事件轮播图的实现）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。