使用 jQuery制作仿Flash 图片横向切换(转)

Demo演示：http://nba.titan24.com/focus/kikx/slider_demo.html
DEMO 说明：
图片横向滑动切换的原理很简单，就是当前被选中的图片，或者当前鼠标划入的图片宽度变大，
其他的图片减少相应的尺寸就可以了，于是我们就有了这个公式：

假如我们有11张图片，图片容器宽度一共为 960 px ，则每个图片宽度为 960/11 px ,
图片打开状态宽度为 160 px,那么其他图片就要变成 （960-160）/10 px 基于这个公式，
再结合jQuery的 animate 方法对样式的控制，我们就可以模拟这个效果。


这个动画的原理很简单，但是在实现的过程中有几个需要注意的问题。

1，样式上：

由于图片要始终位于中间位置，所以我们把图片作为背景图片，这样做的好处有2。

第一，根据容器大小的变换显示图片区域大小 ，就模拟了Flash 遮罩的效果；

第二，用 background:url(../images/0.jpg) center top no-repeat; 可以使得图片始终在容器中间位置显示。

由于图片容器是浮动的，所以我们必须保证图片们不能换行，在本例中，
我采用了这样的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; width:1000px;} /*大于外层容器宽度 预留安全空间*/
.picon li{ float:left; height:400px; border-right:1px solid #fff; width:79px; position:relative;}

2，在脚本方面的技巧

第一：在算图片的尺寸的时候要取整 ，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);
}
来取消延时。

具体的代码大家可以再下载的例子中查看。

下载地址 http://kikx.googlecode.com/files/uefa_slider.zip

PS：在实现的过程中我还试图采用表格的结构，利用表格自动分配宽度的原理来省却计算
每个容器的宽度，结果是在IE中运行可以，但是在Firefox等其他现代浏览器中出现反复跳
动的现象。所以最后还是采取了脚本计算分配宽度的做法。