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

<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 (512.笔记) 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>