从这一章节开始，我将会为大家陆续的介绍利用Jquery完成特效动画。先来看看这一节所介绍的特效：传统轮播。
一、需求分析
1. 提供很多尺寸相等的图片，一排紧挨着显示。
2. 左右有两个切换按钮，用来控制显示上一张还是下一张。
3. 右下方有指示器"小圈圈"，用来提示显示到第几个图片；也可以点击它，进行图片的切换。
4. 每隔一个固定的时间，图片会自动滚动。
5. 当鼠标放到图片上面的时候，会停止自动滚动；当鼠标离开后，再经过固定间隔时间后，又会自动播放。
二、代码剖析
1. 用html代码搭建框架
<body> <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> </ul> <div> <div></div> <div></div> </div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body>
1> id为container的div，是整个轮播效果的容器。
2> id为content的ul，里面存放的内容就是界面上面显示的滚动的图片。
3> id为btn的div，里面的两个子元素就是用来切换上一张还是下一张的按钮。
4> id为indicator的ul，用来显示指示器。
2. CSS代码改变显示样式
1> 下面两句代码，清除掉浏览器默认的间隙。
*{margin: 0; padding: 0;}
2> 设置父容器的样式。
#container { width:560px; height: 300px; margin: 100px auto; position: relative; overflow: hidden; }
由于显示的图片大小就是 560 X 300, 所以这里的父容器的大小也设置这么大，这里设置的margin，就是让父容器水平居中，垂直距离顶部100px，overflow表示如果显示的子元素超出了container的范围，就隐藏掉(注：由于显示的图片是一排显示的，如果不加上overflow: hidden这个属性的话，就露馅了，去掉这个属性的话，效果如下：)。
也就是说，如果不加上overflow: hidden 这个属性的话，所有的图片就会一排全部显示出来了。
最后一个就是定位属性 position: relative; 由于container是父容器，所以应该设置为relative，而它的所有的子元素要进行绝对定位的话，他们的position应该设置为absolute。这就是所谓的 "子绝父相" 原则。在绝对定位中都这么使用。
3> 设置content的样式
#container #content { list-style: none; width: 10000px; position: absolute; left:0; top:0; } #container #content li { float:left; } #container #content li img { border: 0; }
注意到，content的width属性设置为了10000px，这是为了保证它能够存放足够多的图片。默认情况下，content中所有的li是块级元素，也就是他们会上下排列；所以加了一句float:left；让他们左右排列。而父级元素container设置了overflow: hidden, 所以这些左右排列的图片只能看到第一个。
4> 设置左右切换按钮的样式
#container #leftBtn { position: absolute; width:45px; height: 45px; top:108px; left: 20px; background: url(images/icons.png) no-repeat 0 0; cursor: pointer; } #container #rightBtn { position: absolute; width:45px; height: 45px; top:108px; right: 20px; background: url(images/icons.png) no-repeat 0 -45px; cursor: pointer; }
注意到，在获取左右按钮的时候，他们是取自同一张图片icons.png。只是图片截取的位置不一致，这就是所谓的"精灵"。就是为了减小图片占用大小，而把很多的小icon放置在一张图片上面，然后通过定位截取的办法，获取想要的部分。（注：关于怎样定位icon？ 1. 写代码慢慢调节；2. 用精灵裁切定位软件，如：CSS Sprites等）。图片设计大致如下：
这张图片中，不仅包含了左右切换按钮，指示器的按钮也一并给出了，所以在书写指示器按钮的css代码时候，同样也可以使用这张图片。
4> 设置指示器的样式