轮播图在以后的应用中还是比较常见的，不需要多少行代码就能实现。但是在只掌握了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、利用层级的高低来使最顶部图片变化的做法（这个做法没有位移的动作，但是逻辑却非常简便，很实用）
直接来代码更直观点：基本每行都有注释
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>轮播图 (闪现 自适应)</title>
6 <style media="screen">
7 * {
8 margin: 0;
9 padding: 0;
10 } 11 .wrap { 12 width: 60%; 13 background: red; 14 margin: auto; 15 position: relative; 16 } 17 .wrap img { 18 width: 100%; 19 position: absolute; 20 /*z-index: 10;*/ 21 } 22 input { 23 border: 1px solid lightgray; 24 width: 50px; 25 height: 30px; 26 background: red; 27 border-radius: 5px; 28 font-size: 20px; 29 } 30 </style> 31 </head> 32 <body> 33 <div class="wrap"> 34 <img src="img/01.jpg" alt="" /> 35 <img src="img/02.jpg" alt="" /> 36 <img src="img/03.jpg" alt="" /> 37 <img src="img/04.jpg" alt="" /> 38 </div> 39 <input type="button" id="butLeft" name="name" value="◀︎"> 40 <input type="button" id="butRight" name="name" value="▶︎"> 41 </body> 42 <script type="text/javascript"> 43 // 获取images元素生成字符串数组，字符串数组不能进行push pop splice 等操作 44 // 所以要将它的值重新存放进一个数组中，后面有定义 45 var images = document.getElementsByTagName('img'); 46 var butLeft = document.getElementById('butLeft'); 47 var butRight = document.getElementById('butRight'); 48 //获取变量index 用来为后面设置层级用 49 var index = 1000; 50 // 获取一个空的数组，用来存放images里面的字符串元素 51 var imagess = []; 52 53 // for循环用来给imagess数组赋值，并且改变数组中的元素的层级 54 for (var i = 0; i < images.length; i++) { 55 imagess[i] = images[i]; 56 var currentImage = imagess[i]; 57 // 当前图片的层级的设置，一轮for循环都为他们设置了初始的zIndex，图片越靠前，层级设置 58 // 要求越高，所以用的是－i,这样图片会按顺序从第一张，第二张.....依次向下 59 currentImage.style.zIndex = -i; 60 } 61 62 // 设置计数器count，执行一次点击事件（向左或者向右）count加1 63 var count = 0; 64 // 向左的点击事件 65 butLeft.onclick = function() { 66 // 从数组头部弹出一个图片元素 67 var showFirst = imagess.shift(); 68 // 给弹出的这个图片元素设置层级，即 －1000+count， 69 // 让层级相较其他元素是最小的，数组头部弹出的图片会显示在最底层 70 showFirst.style.zIndex = - index + count; 71 // 层级改变完成后再将他push进数组的尾部 72 imagess.push(showFirst); 73 // 点击一次加1，不用考虑具体的值，只需要有点击事件加 1 74 count++; 75 } 76 // 向右点击事件 77 butRight.onclick = function() { 78 // 从imagess的尾部弹出一个元素，并赋值给showFirst 79 var showFirst = imagess.pop(); 80 // 设置showFirst的层级为最大，1000+count ，这样他会显示在第一层 81 showFirst.style.zIndex = index + count; 82 // 层级改变之后将他在插入数组imagess的头部 83 imagess.unshift(showFirst); 84 // 点击一次加1 85 count++; 86 } 87 </script> 88 </html>