JavaScript 自动识别图片数量滑动动画的简单示例

感兴趣的小伙伴，下面一起跟随编程之家 jb51.cc的小编来看看吧。
css:

/**
 * @param 
 * @arrange (编程之家) jb51.cc
 **/
<style>
*{ padding:0; margin:0; list-style:none; border:none; color:#000;}
#Box{position:relative; width:980px; height:133px; overflow:hidden; border:1px solid #ccc;}
#Box a{position:absolute; top:0;}
#Box a img{border-left:1px solid #ccc;}
</style>

html:

<div id=Box class=clearfix>
<a href=# class=slimg1><img src=/images/slidimg1.gif /></a>
<a href=# class=slimg2><img src=/images/slidimg2.gif /></a>
<a href=# class=slimg3><img src=/images/slidimg3.gif /></a>
<a href=# class=slimg4><img src=/images/slidimg1.gif /></a>
<a href=# class=slimg5><img src=/images/slidimg2.gif /></a>
<a href=# class=slimg6><img src=/images/slidimg3.gif /></a>
<a href=# class=slimg7><img src=/images/slidimg1.gif /></a>
<a href=# class=slimg8><img src=/images/slidimg2.gif /></a>
<a href=# class=slimg9><img src=/images/slidimg3.gif /></a>
<a href=# class=slimg10><img src=/images/slidimg1.gif /></a>
<a href=# class=slimg11><img src=/images/slidimg2.gif /></a>
<a href=# class=slimg5><img src=/images/slidimg2.gif /></a>
</div>

JS:

/**
 * @param 
 * @arrange (编程之家) jb51.cc
 * 参数含义： 
 * btn:触发按钮； 
 * imgwidth:图片的宽度，这里提前给出宽度可以避免因网络延迟影响图片加载过慢而引发的问题。 
 * speed:图片移动速度； 
 * Box:触发按钮的外层；
**/
<script src=/jquery-1.6.4.min.js></script>
<script>
function slidimg(Box,btn,imgwidth,speed){
    var wBox = $(Box).width();
    var num = $(btn).length;
    var wimg = imgwidth;
    var length = $(btn).length;
    var dvalue = (wBox - wimg)/(length - 1); //新生成的图片间距；
    /*排列图片位置*/
    for(var j = 0; j<length; j++){
        var oleft = wimg + dvalue*(j-1);
        if(j == 0){
            $(btn).eq(j).<a href=http://jb51.cc/ title=css>css</a>(left,0);
        }
        else{
            $(btn).eq(j).<a href=http://jb51.cc/ title=css>css</a>(left,oleft);
        };
    };
    $(btn).mouseenter(function(){
        var k = $(btn).index($(this));
        for(var i=0; i<length; i++){
            var fleft = dvalue*i;
            var bleft = dvalue*(i-1)+wimg;
            if(i<=k){
                $(btn).eq(i).stop(true,false).animate({left:fleft + px},speed);
            }else {
                $(btn).eq(i).stop(true,false).animate({left:bleft + px},speed);
            }
        }
    });
};
$(function(){
    slidimg(#Box,#Box a,385,500);
    });
</script>