求索阁

HTML结构代码：

<div id="scrollbox">
    <ul>
        <li><img src="1.jpg" alt=""></li>
        <li><img src="2.jpg" alt=""></li>
        <li><img src="3.jpg" alt=""></li>
        <li><img src="4.jpg" alt=""></li>
    </ul>
</div>
CSS控制代码：

#scrollbox{width:500px;height:240px;position:relative;overflow:hidden;margin:0 auto;border:1px solid #000;}
#scrollbox ul {width:900px;height:280px;position:absolute;padding:10px 0;}
#scrollbox li {float:left;position:relative;margin:0 10px;border:1px solid #000;}

jQuery核心代码：

function scrollBox(){
    var first = $('#scrollbox ul li:first');
    var width = -(first.outerWidth(true)) + 'px';
    $('#scrollbox ul').animate({left:width},{
        duration:200,
        complete:function(){
            $('#scrollbox ul').append(first).css("left","0");
        }
    });
};
$(document).ready(function(){
    myScroll = setInterval(scrollBox,1500);
    $('#scrollbox').hover(function(){
        clearInterval(myScroll);
    },function(){
        myScroll = setInterval(scrollBox,1500);
    }
);
})

    最后别忘记加载jQuery。
    参考文献