无缝轮播

  *{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{width: 600px;}
  .img{position: absolute;top: 0;left: 0;}
  .img li{float: left;}
  .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);display: block;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;}

    <div class="banner">
     <ul class="img">
      <li><a href="#"><img src="img/img_1.png" alt="第1张图片" ></a></li>
      <li><a href="#"><img src="img/img_2.png" alt="第2张图片" ></a></li>
      <li><a href="#"><img src="img/img_3.png" alt="第3张图片" ></a></li>
      <li><a href="#"><img src="img/img_4.png" alt="第4张图片"></a></li>
      <li><a href="#"><img src="img/img_5.png" alt="第5张图片"></a></li>
     </ul>
     <ul class="num"></ul>
     <div class="btn">
      <span class="prev"><</span>
      <span class="next">></span>
     </div>
</div>

/*
 * banner 最外层盒子
 * bannerbox 图片放置处
 * num 轮播圆点
 * btn 控制上下页的盒子
 * prev 上一页
 * next 下一页
 * */

　　$(function(){
　　　　banner.Bannerinit('.banner','.img','.num','.btn','.prev','.next'); //调用
　　})

var banner = {
    Bannerinit:function(banner,bannerbox,num,btn,prev,next){
          var i=0;
          var timer=null;
          for (var j = 0; j < $(''+bannerbox+' li').length; j++) { //创建圆点
           $(''+num+'').append('<li></li>')
          }
          $(''+num+' li').first().addClass('active'); //给第一个圆点添加样式
          
          var firstimg=$(''+bannerbox+' li').first().clone(); //复制第一张图片
          $(''+bannerbox+'').append(firstimg).width($(''+bannerbox+' li').length*($(''+bannerbox+' img').width())); //将第一张图片放到最后一张图片后，设置ul的宽度为图片张数*图片宽度
          // 下一个按钮
          $('.next').click(function(){
           i++;
           if (i==$(''+bannerbox+' li').length) {
            i=1; //这里不是i=0
            $(''+bannerbox+'').css({left:0}); //保证无缝轮播，设置left值
           };
          
           $(''+bannerbox+'').stop().animate({left:-i*600},300);
           if (i==$(''+bannerbox+' 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=$(''+bannerbox+' li').length-2;
            $(''+bannerbox+'').css({left:-($(''+bannerbox+' li').length-1)*600});
           }
           $(''+bannerbox+'').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();
           $(''+bannerbox+'').stop().animate({left:-_index*600},150);
           $(''+num+' li').eq(_index).addClass('active').siblings().removeClass('active');
          })
          //定时器自动播放
          timer=setInterval(function(){
           i++;
           if (i==$(''+bannerbox+' li').length) {
            i=1;
            $(''+bannerbox+'').css({left:0});
           };
           $(''+bannerbox+'').stop().animate({left:-i*600},1000);
           if (i==$(''+bannerbox+' li').length-1) { 
            $(''+num+' li').eq(0).addClass('active').siblings().removeClass('active');
           }else{
            $(''+num+' li').eq(i).addClass('active').siblings().removeClass('active');
           }
          },2000)
          
          //鼠标移入，暂停自动播放，移出，开始自动播放
          $(''+banner+'').hover(function(){ 
           clearInterval(timer);
          },function(){
           timer=setInterval(function(){
           i++;
           if (i==$(''+bannerbox+' li').length) {
            i=1;
            $(''+bannerbox+'').css({left:0});
           };
          
           $(''+bannerbox+'').stop().animate({left:-i*600},1000);
           if (i==$(''+bannerbox+' li').length-1) { 
            $(''+num+' li').eq(0).addClass('active').siblings().removeClass('active');
           }else{
            $(''+num+' li').eq(i).addClass('active').siblings().removeClass('active');
           }
          },2000)
          })    
    }
}