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{width: 500px; height:350px; border:3px solid #f90; margin: 0 auto; position: relative; overflow: hidden;}
.wrap ul{width: 2000px; position: absolute; left: 0; top:0;}
.wrap ul li{float: left;width: 500px;}
.wrap ol{position: absolute;bottom: 10px;right: 10px;}
.wrap ol li{float: left;width: 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去掉，一开始测试的时候加上的，后来测试怎么都不对，最后发现时这个问题，要记牢了