在我看来要想实现轮播主要是要知道当前位于的页面和即将位于的页面。这个案例是通过改变图片的透明度来实现轮播的效果。
我把涉及的知识点分为两个方面，分别是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 rel="stylesheet" type="text/css" href="index.css"> </head> <body> <div class=\'warp\' id=\'warp\'> <ul class=\'list\' id=\'list\'> <li><img src=\'img/4274ad202b27b671e622388989399d54.jpg\' style=\'opacity: 1\'></li> <li><img src=\'img/299733ddbe89d6b317cc0e84c43999d4.jpg\' style=\'opacity: 1\'></li> <li><img src=\'img/9b7ec36280e638929aa10ce0955df3d3.jpg\' style=\'opacity: 1\'></li> </ul> <div class=\'pre\' id=\'pre\'>《</div> <div class=\'next\' id=\'next\'>》</div> </div> <script type="text/javascript" src=\'index.js\'></script> </body> </html>