DEMO 说明：
图片横向滑动切换的原理很简单，就是当前被选中的图片，或者当前鼠标划入的图片宽度变大，
图片横向滑动切换的原理很简单，就是当前被选中的图片，
假如我们有11张图片，图片容器宽度一共为 960 px ，则每个图片宽度为 960/11 px ,
图片打开状态宽度为 160 px,那么其他图片就要变成 （960-160）/10 px 基于这个公式，
再结合jQuery的 animate 方法对样式的控制，我们就可以模拟这个效果。
再结合jQuery的 animate 方法对样式的控制，我们就可以模拟这个效果。
这个动画的原理很简单，但是在实现的过程中有几个需要注意的问题。
1，样式上：
由于图片要始终位于中间位置，所以我们把图片作为背景图片，这样做的好处有2。
第一，根据容器大小的变换显示图片区域大小 ，就模拟了Flash 遮罩的效果；
第二，用 background:url(../images/0.jpg) center top no-repeat; 可以使得图片始终在容器中间位置显示。
由于图片要始终位于中间位置，所以我们把图片作为背景图片，
第一，根据容器大小的变换显示图片区域大小 ，就模拟了Flash 遮罩的效果；
第二，用 background:url(../
由于图片容器是浮动的，所以我们必须保证图片们不能换行，在本例中，
我采用了这样的DOM结构 ：
我采用了这样的DOM结构 ：
<div class="picon" id="picon">
<ul>
<li class="pic1"> <!--背景是pic1.jpg的 li--> </li>
<li class="pic2"> <!--背景是pic2.jpg的 li--> </li>
.....
</ul>
</div>
样式：
.picon{ clear:both; height:400px; overflow:hidden; background:#000; position:relative;}
.picon ul{ position:absolute; top:0; left:0; height:400px; 1000px;} /*大于外层容器宽度 预留安全空间*/
.picon li{ float:left; height:400px; border-right:1px solid #fff; 79px; position:relative;}
2，在脚本方面的技巧
第一：在算图片的尺寸的时候要取整 ，var avgw= parseInt((960-maxw-2)/11);
我们并不需要带小数的像素值。
|
第一：在算图片的尺寸的时候要取整 ，var avgw= parseInt((960-maxw-2)/11);
我们并不需要带小数的像素值。
|
第二：就是延时执行，也就是鼠标移入一个图片的时候，不立即执行，要延时一段时间，
如果立即执行则鼠标在经过的途中会划过N多的图片，每个都会触发动作，就导致
图片挨个执行自己的动画，这样就导致运行缓慢系统负担严重，而且我们并不想
触发那些动作。
比如 我们把动作设置成一个函数
var act=function (){
//code goes here;
}
那么我们采用如下方式
$("#picon").find("li").mouseover(
function(){
t=setTimeout(act,200);
}
）
这样就避免了鼠标快速划过触发的动作，别忘了在离开的时候 还要
if(t){
clearTimeout(t);
}
来取消延时。
来取消延时。
PS：在实现的过程中我还试图采用表格的结构，
每个容器的宽度，结果是在IE中运行可以，但是在Firefox等其他现代浏览器中出现反复跳
动的现象。所以最后还是采取了脚本计算分配宽度的做法。