图片横向切换效果

 

点击图片查看DEMO

 欧战将至，关于欧战的东西就越来越多，今天公司让仿做一个UEFA首页的FLASH那样的，花费了一点时间模拟了一下，

中间碰到几点问题，本来这个分配宽度 想用表格的特性来自动分配，结果FF下面一片糟糕，表格跳来跳去，看来不能偷懒，还是认认真真的用脚本算一下宽度吧，
 另外一点就是 鼠标快速划过触发了很多的事件，大家都在滚来滚去的，刚写好的时候还没有注意这个问题，打开一看晃得厉害，就写了个延时执行的东西。效果还不错。

由于打算用表格自动分配宽度走了弯路，耽误了些时间，还好其他的还算顺利，效果还是做出来了。

最后贴一下代码 注释一下：

 $(document).ready(function(){

    var movetime=500; //动画时间    
    var maxw=252; //图片最大宽度
    var avgw= parseInt((960-maxw-2)/11); //其他的平均宽度    
    var index; //当前序列
    var names=$("#namecon").find("a");
    var t=false; //延时执行
    var _this; 

    //标记当前
    function cur(ele){        
        ele=$(ele)? $(ele):ele;
        ele.addClass("cur").siblings().removeClass("cur");    
        }

    $("#picon").find("li").mouseover(function(){                                      
            _this=$(this);        
            index=$( "#picon li" ).index( $(this)[0] );
            var act=function (){
                _this.siblings("li").removeClass("cur");                
                cur(names.eq(index));            
                _this.animate( //宽度变化动画
                {"width":maxw+"px"},
                {duration:movetime, 
                easing: "easeOutQuart" , //应用缓动
                complete: function(){ cur(_this)} //完成后标记当前显示 div 信息
                }
                ).siblings("li").animate( //其他的宽度变小
                {"width":avgw+"px"},
                {duration:movetime}
                )
            }
            t=setTimeout(act,200);    //这句是延时执行 否则act被触发过快        
            return false;                
        }).mouseout(function(){ //如果划出此li 则不计时执行act函数
            if(t){
                clearTimeout(t);
                }
            })
    
    names.mouseover(function(){ //关联人名
        index=$( "#namecon a" ).index( $(this)[0] );                     
        $("#picon").find("li").eq(index).mouseover();
        })
})

 

 http://kikx.googlecode.com/files/uefa_slider.zip