jQuery：无焦点轮播图，鼠标经过停止，移开继续

首先每个图片的宽度都是100%，高度500px，一共4个图片。
4个图片外层div，id="imgs",宽度=100%*4，高度500px。
imgs外层有一个div，id="show",宽度是一张图片的宽度100%，height=500px。

<style>
    #show{
        width: 100%;
        height: 500px;
        position: relative;
        border: 1px solid #d9d919;
        overflow: hidden;
    }
    #imgs{
        width: 400%;
        height: 500px;
        position: relative;
        left: 0;
    }
    #imgs>img{
        width: 100%;
        height: 500px;
        float: left;
    }
</style>
<div id="show">
    <div id="imgs">
        <img src="../img/1.jpg" /><img src="../img/2.jpg" /><img src="../img/10.jpg"/><img src="../img/3.jpg" />
    </div>
</div>

注意：imgs的css设置必须有position，否则后面jquery设置动画没有办法设置left的值。
jquery代码：

i=setInterval(scrolls,2000);
function scrolls(){
    $("#imgs").animate({"left":"-100%"},1000,function(){
        $(this).append($(this).children("img:first"));//将第一张图片移到最后一张
        $(this).css("left","0");
    });
}
$("#show").mouseenter(function(){
    clearInterval(i);
})
$("#show").mouseleave(function(){
    scrolls();
})