jQuery动画效果图片轮播特效

也就是说，如果不加上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> 设置指示器的样式

#container #indicator
{
 position: absolute;
 right: 50px;
 list-style: none;
 bottom: 12px;
} 
#container #indicator li
{
 float: left;
 cursor: pointer;
 margin-left: 20px;
 width:14px;
 height: 14px;
 background: url(images/icons.png) no-repeat -23px -127px;
} 
#container #indicator li.current
{
 background-position: -9px -125px;
}