juery 无缝轮播图

css:

<style>
    *{margin: 0;padding:0; }
    ul{list-style: none;}
    .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;}
    .img{position: absolute;top: 0;left: 0;width: 3600px;}
    .img li{float: left;}
    .img li img{width:600px;height: 300px;}
    .num{position: absolute;bottom: 10px;width: 100%;text-align: center;font-size: 0;}
    .num li{width: 10px;height: 10px;background:rgba(0,0,0,0.5);;border-radius: 100%;display: inline-block;margin: 0 5px;cursor: pointer;}
    .btn{display: none;}
    .btn span{display: block;width: 50px;height: 100px;background: rgba(0,0,0,0.6);color: #fff;font-size: 40px;line-height: 100px;text-align: center;cursor:pointer;}
    .btn .prev{position: absolute;left: 0;top: 50%;margin-top: -50px;}
    .btn .next{position: absolute;right: 0;top: 50%;margin-top: -50px;}
    .num .active{background-color: #fff;}
</style>

html:

<div class="banner">
    <ul class="img">
        <li><a href="#"><img src="images/ban1.jpg" alt="第1张图片"></a></li>
        <li><a href="#"><img src="images/ban2.jpg" alt="第2张图片"></a></li>
        <li><a href="#"><img src="images/ban3.jpg" alt="第3张图片"></a></li>
        <li><a href="#"><img src="images/ban4.jpg" alt="第4张图片"></a></li>
        <li><a href="#"><img src="images/ban5.jpg" alt="第5张图片"></a></li>
        <li><a href="#"><img src="images/ban6.jpg" alt="第6张图片"></a></li>
    </ul>
    <ul class="num"></ul>
    <div class="btn">
        <span class="prev"><</span>
        <span class="next">></span>
    </div>
</div>
js:

<script type="text/javascript" src="js/jquery-1.8.3-min.js"></script>
<script>
    $(function(){
        var i=0;
        var timer=null;
        for (var j = 0; j < $('.img li').length; j++) { //创建圆点
            $('.num').append('<li></li>')
        }
        $('.num li').first().addClass('active'); //给第一个圆点添加样式

        var firstimg=$('.img li').first().clone(); //复制第一张图片
        $('.img').append(firstimg).width($('.img li').length*($('.img img').width())); //将第一张图片放到最后一张图片后，设置ul的宽度为图片张数*图片宽度

        console.log($('.img li').length)
        // 下一个按钮
        $('.next').click(function(){
            i++;
            if (i==$('.img li').length) {
                i=1; //这里不是i=0
                $('.img').css({left:0}); //保证无缝轮播，设置left值
            };
            $('.img').stop().animate({left:-i*600},300);
            if (i==$('.img li').length-1) {  //设置小圆点指示
                $('.num li').eq(0).addClass('active').siblings().removeClass('active');
            }else{
                $('.num li').eq(i).addClass('active').siblings().removeClass('active');
            }

        })

        // 上一个按钮
        $('.prev').click(function(){
            i--;
            if (i==-1) {
                i=$('.img li').length-2;
                $('.img').css({left:-($('.img li').length-1)*600});
            }
            $('.img').stop().animate({left:-i*600},300);
            $('.num li').eq(i).addClass('active').siblings().removeClass('active');
        })

        //设置按钮的显示和隐藏
        $('.banner').hover(function(){
            $('.btn').show();
        },function(){
            $('.btn').hide();
        })

        //鼠标划入圆点
        $('.num li').mouseover(function(){
            var _index=$(this).index();
            $('.img').stop().animate({left:-_index*600},150);
            $('.num li').eq(_index).addClass('active').siblings().removeClass('active');
        })

        //定时器自动播放
        timer=setInterval(function(){
            i++;
            if (i==$('.img li').length) {
                i=1;
                $('.img').css({left:0});
            };

            $('.img').stop().animate({left:-i*600},300);
            if (i==$('.img li').length-1) {
                $('.num li').eq(0).addClass('active').siblings().removeClass('active');
            }else{
                $('.num li').eq(i).addClass('active').siblings().removeClass('active');
            }
        },1000)

        //鼠标移入，暂停自动播放，移出，开始自动播放
        $('.banner').hover(function(){
            clearInterval(timer);
        },function(){
            timer=setInterval(function(){
                i++;
                if (i==$('.img li').length) {
                    i=1;
                    $('.img').css({left:0});
                };

                $('.img').stop().animate({left:-i*600},300);
                if (i==$('.img li').length-1) {
                    $('.num li').eq(0).addClass('active').siblings().removeClass('active');
                }else{
                    $('.num li').eq(i).addClass('active').siblings().removeClass('active');
                }
            },1000)
        })

    })
</script>