我们在书写代码之前，先分析效果图的结构：
1. 左右两个方向按钮，可以用来切换上一张与下一张。
2. 下方有分页指示器，用来标注滚动到了第几张，当然，你点击对应的按钮，也可以跳转到对应的图片。
3. 中间主要显示区域就是用来摆放需要轮播的图片。
根据上面描述，我们首先可以书写HTML代码。
一、HTML代码
<body> <div> <div> <span></span> <span></span> </div> <ul> <li><a href="#"><img src="https://www.jb51.net/images/0.jpg" /></a></li> <li><a href="#"><img src="https://www.jb51.net/images/1.jpg" /></a></li> <li><a href="#"><img src="https://www.jb51.net/images/2.jpg" /></a></li> <li><a href="#"><img src="https://www.jb51.net/images/3.jpg" /></a></li> <li><a href="#"><img src="https://www.jb51.net/images/4.jpg" /></a></li> <li><a href="#"><img src="https://www.jb51.net/images/5.jpg" /></a></li> <li><a href="#"><img src="https://www.jb51.net/images/6.jpg" /></a></li> <li><a href="#"><img src="https://www.jb51.net/images/7.jpg" /></a></li> <li><a href="#"><img src="https://www.jb51.net/images/8.jpg" /></a></li> </ul> <div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> </body>
代码内容一目了然，与我上面所描述的一致；这里有两点我需要说明：
1. class为tuul的ul，也就是存放需要轮播的图片；里面的li主要有两种class：包装为 "no" 与 "waiting" 形式，其中 "no" 系列表示当前可能处于"活跃"状态的图片，而 "waiting" 表示这些图片当前处于隐藏状态，在接下来的CSS代码中就有体现。
2. 分页指示器默认设置第三个 li的class 为 cur. 因为tuul中初始的时候设置的 "活跃" 图片的个数是5张，所以默认让第三章居中显示。但不知道大家有没有疑惑，初始状态的时候，界面上面显示的图片个数为3张，所以为什么不选择第二张作为居中显示的图片？ 那是因为考虑到点击左边按钮的情况，如果选择第二张居中显示，第一张是可以看到，但第一张前面就没有图片了。当你点击左按钮的时候，就 "露馅" 了。所以整体的设计思路是：界面上面显示三张，超出界面的部分，左右各有一张，只是看不到而已。在下面的讲解中，我将详细讲解这个实现过程。
二、CSS代码
<style type="text/css"> *{ padding: 0; margin: 0; } #youku{ width: 1189px; height: 360px; margin: 100px auto; position: relative; overflow: hidden; } #youku ul{ list-style: none; } #youku .tuul li{ position: absolute; background-color: black; } #youku li.waiting{ display: none; } #youku li img{ width: 100%; height: 100%; } #youku .anniu .zuo{ position: absolute; width: 45px; height: 45px; background:url(images/zuo.png) no-repeat; top:100px; left:10px; z-index: 1000; cursor: pointer; } #youku .anniu .you{ position: absolute; width: 45px; height: 45px; background:url(images/you.png) no-repeat; top:100px; right:10px; z-index: 1000; cursor: pointer; } #youku li.no0{width: 174px;height:122px;left:-116px;top:100px;z-index: 777;} #youku li.no1{width: 356px;height:223px;left:0px;top:26px;z-index: 888;} #youku li.no2{width: 642px;height:273px;left:274px;top:0px;z-index: 999;} #youku li.no3{width: 356px;height:223px;left:834px;top:26px;z-index: 888;} #youku li.no4{width: 174px;height:122px;left:1097px;top:100px;z-index: 777;} #youku li.no1 img , #youku li.no3 img{ opacity: 0.3; } #youku .xiaoyuandian{ width: 600px; height: 20px; position: absolute; top: 312px; left: 454px; } #youku .xiaoyuandian ul li{ float: left; width: 16px; height: 16px; background-color: blue; margin-right: 10px; border-radius: 100px; cursor: pointer; } #youku .xiaoyuandian ul li.cur{ background-color:green; } </style>
关于这里的CSS我就不作一一说明了，如果想了解更具体的话，请参考我以前写的系列 JS & JQuery. 这里，我只说明两点：
1. 对 "活跃" 图片的CSS的设置，即 #youku li.no0~no4的设置，注意到no0的left值是负数，而no1的left值是0，这就印证了上面我所表达的观点，可视范围静止状态是显示三张图片的，而其余两张图片是分别在可视范围的左右侧。注意设置各个图片的z-index值，使得有立体层次感，值越大越靠前显示。
2. 对可视范围两边的图片，设置opacity, 使得他们变暗。
设置完以上CSS代码后，剖析图如下：
三、JQuery代码