使用 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等其他现代浏览器中出现反复跳

动的现象。所以最后还是采取了脚本计算分配宽度的做法。