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

这篇文章主要为大家详细介绍了JavaScript 自动识别图片数量滑动动画的简单示例，具有一定的参考价值，可以用来参考一下。

/**
 * @param 
 * @arrange （www.idcnote.com）
 **/
<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>

<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>

/**
 * @param 
 * @arrange （www.idcnote.com）
 * 参数含义： 
 * 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://512pic.com/" title="css">css</a>("left", 0);
        }
        else{
            $(btn).eq(j).<a href="http://512pic.com/" 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>