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

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

感兴趣的小伙伴，下面一起跟随四海网的小编罗X来看看吧。
css:

/**
 * @param 
 * @arrange (512.笔记) www.q1010.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>

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 (512.笔记) www.q1010.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://q1010.com/" title="css">css</a>("left", 0);
        }
        else{
            $(btn).eq(j).<a href="http://q1010.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>

本文来自：http://www.q1010.com/174/2083-0.html

注：关于JavaScript 自动识别图片数量滑动动画的简单示例的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：滑动