本文为大家分享了一种常见的并且比较复杂的轮播效果，就是优酷主界面的轮播图，效果图如下：
我们在书写代码之前，先分析效果图的结构：
1. 左右两个方向按钮，可以用来切换上一张与下一张。
2. 下方有分页指示器，用来标注滚动到了第几张，当然，你点击对应的按钮，也可以跳转到对应的图片。
3. 中间主要显示区域就是用来摆放需要轮播的图片。
根据上面描述，我们首先可以书写HTML代码。
一、HTML代码
<body>
<div id="youku">
<div class="anniu">
<span class="zuo"></span>
<span class="you"></span>
</div>
<ul class="tuul">
<li class="no0"><a href="#"><img src="images/0.jpg" /></a></li>
<li class="no1"><a href="#"><img src="images/1.jpg" /></a></li>
<li class="no2"><a href="#"><img src="images/2.jpg" /></a></li>
<li class="no3"><a href="#"><img src="images/3.jpg" /></a></li>
<li class="no4"><a href="#"><img src="images/4.jpg" /></a></li>
<li class="waiting"><a href="#"><img src="images/5.jpg" /></a></li>
<li class="waiting"><a href="#"><img src="images/6.jpg" /></a></li>
<li class="waiting"><a href="#"><img src="images/7.jpg" /></a></li>
<li class="waiting"><a href="#"><img src="images/8.jpg" /></a></li>
</ul>
<div class="xiaoyuandian">
<ul>
<li></li>
<li></li>
<li class="cur"></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张，所以为什么不选择第二张作为居中显示的图片？ 那是因为考虑到点击左边按钮的情况，如果选择第二张居中显示，第一张是可以看到，但第一张前面就没有图片了。当你点击左按钮的时候，就 “露馅” 了。所以整体的设计思路是：界面上面显示三张，超出界面的部分，左右各有一张，只是看不到而已。在下面的讲解中，我将详细讲解这个实现过程。
