在我看来要想实现轮播主要是要知道当前位于的页面和即将位于的页面。这个案例是通过改变图片的透明度来实现轮播的效果。
我把涉及的知识点分为两个方面，分别是HTML+css和JS。
第一部分（html+css）
包含的知识有：positon定位。
最外层是一个div，它包含了所有的元素。这个轮播一共有三张图片，这三张图片包含在一个无序列表中。最外层的div还有两个用来切换上一张图片和下一张图 片的子元素。这两个子元素也是div，切换上一张图片的div的id属性为pre，切换下一张图片的div的id属性为next。最外层div的 position值为relative。包含图片的无序列表的position为relative。无序列表中的li元素的positon属性值为 absolute，这会让li元素位于文档流之外，所以如果不显示的设置ul的高度，ul高度为零。但是我们不能用css去显示设置ul的高度。因为需要 让这个轮播的高度等于图片的高度,并且要保证在不同分辨率的计算机上图片的高宽比保持不变。在不同分辨率的计算机上图片显示出的高度和宽度是不一样的。所 以我是通过js去设置ul的高度。因为ul的position的属性值为relative，所以ul的高度会撑开外层div的高度。由于这个案例是通过改 变图片透明度实现轮播，所以所有的图片位于同一个位置，在默认情况下最后一张图片会在最上面，第一个图片是在最下面，而轮播第一张显示的图片图片应该是第 一张，然后是第二张，最后才是第三张，所以要显示的对每个li设置z—index属性。并且z-index属性值依次递减。我是用js去设置每一个li的 z-index属性值，但其实并没有必要这样做，直接用css属性就可以了，只不过要写三个选择器。
html如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通过改变透明度实现轮播</title> <link type="text/css" href="https://www.jb51.net/index.css" > </head> <body> <div> <ul> <li><img src='https://www.jb51.net/img/4274ad202b27b671e622388989399d54.jpg'></li> <li><img src='https://www.jb51.net/img/299733ddbe89d6b317cc0e84c43999d4.jpg'></li> <li><img src='https://www.jb51.net/img/9b7ec36280e638929aa10ce0955df3d3.jpg'></li> </ul> <div>《</div> <div>》</div> </div> <script type="text/javascript" src='https://www.jb51.net/index.js'></script> </body> </html>
css代码如下
*{ padding: 0; margin: 0; } .warp{ position: relative; width: 100%; } .list{ position: relative; width: 100%; } .list li{ position: absolute; top:0; left: 0; width: 100%; list-style: none; opacity: 1; } li img{ width: 100%; } .pre,.next{ position: absolute; top: 50%; bottom: 0; width: 64px; height: 64px; z-index: 10; margin-top: -32px; text-align: center; line-height: 64px; color: #fff; font-weight: bold; font-size: 30px; cursor: pointer; background-color: transparent; } .pre{ left: 20px; right: auto; } .next{ right:20px; left: auto; } .pre:hover,.next:hover{ background-color: rgba(0,0,0,0.7); }
第二部分（js）涉及的知识有：事件，函数节流，设置定时器，清除定时器
事件由于用的是原生js去实现功能，所以需要考虑浏览器兼容问题。
事件流
有 两种类型的时间流，分别是事件冒泡流和事件捕获流，这差不多是完全相反的事件流概念，事件冒泡流叫做事件冒泡，这是IE提出的。以一个click事件为 例，在事件冒泡中事件首先发生在最具体的那个元素上，也就是我们单击的那个元素，然后沿着dom树向上传播，在传播的过程中，每一级节点都会发生 click事件，直到传播的document对象。事件捕获流叫做事件捕获，这是由Netscape Communicator提出的。同样以一个 click事件为例，在事件捕获中事件首先发生在最不具体的那个节点上（document对象首先接收到事件），然后沿着dom树向下传播，最具体的节点 最后接收到事件，也就是说，实际上被点击的那个元素最后接收click事件。“DOM2级事件”规定事件流包括三个阶段，分别为事件捕获阶段，处于目标阶 段和事件冒泡阶段。在主流浏览器中除了IE不支持DOM事件流，其他浏览器都支持DOM事件流。所以IE之支持事件冒泡。但是在将来IE应该会支持DOM 事件流。那时候在绑定事件的时候就不用考虑浏览器兼容问题了。目前为了最大程度的兼容各种浏览器，我将事件处理程序添加到事件流的冒泡阶段。
事件处理程序
》DOM0级事件处理程序