jQuery单张图无缝滚动（图片轮播）

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片轮播效果</title>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
    var oul = $('.wrap ul');
    var ali = $('.wrap ul li');
    var numli = $('.wrap ol li');
    var aliWidth = $('.wrap ul li').eq(0).width();
    var _now = 0;   //这个是控制数字样式的计数器
    var _now2 = 0;    //这个是控制图片运动距离的计数器
    var timeId = null;
    numli.click(function(){
        var index = $(this).index();
        _now = index;
        _now2 = index;
        $(this).addClass('current').siblings().removeClass('current');
        oul.animate({'left':-aliWidth*index},500);
    });


    //图片运动的函数
    function slider(){
        if(_now==numli.size()-1){
            ali.eq(0).css({
                'position' : 'relative',
                'left' : oul.width()
            });
            _now = 0;
        }else{
            _now++;
        };
        _now2++;

        numli.eq(_now).addClass('current').siblings().removeClass('current');
        oul.animate({'left':-aliWidth*_now2},500,function(){
            if(_now == 0){
                ali.eq(0).css('position','static');
                oul.css('left',0);
                _now2 = 0;
        }
        });
    };

    timeId = setInterval(slider,1500);
    $('.wrap').hover(function(){
        clearInterval(timeId);
    },function(){
        timeId = setInterval(slider,1500);
    });
});
</script>
<style>
*{margin:0;padding:0;}
li{list-style: none;}
body{margin: 50px;}
.wrap{ 500px; height:350px; border:3px solid #f90; margin: 0 auto; position: relative; overflow: hidden;}
.wrap ul{ 2000px; position: absolute; left: 0; top:0;}
.wrap ul li{float: left; 500px;}
.wrap ol{position: absolute;bottom: 10px;right: 10px;}
.wrap ol li{float: left; 16px; height: 16px; text-align: center; line-height: 16px; border:1px solid yellow; background: #000; color: #fff; margin-right:3px; cursor:pointer;}
.wrap ol li.current{background: #fff; color: #000;}
</style>
</head>
<body>

<div class="wrap">
    <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>
    <ol>
        <li class="current">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>
</div>

</body>
</html>
要记着把ul的overflow:hidden去掉，一开始测试的时候加上的，后来测试怎么都不对，最后发现时这个问题，要记牢了