原生JS实现无缝轮播图

效果图：

其实左右还有两个箭头按钮可以切换图片，不过是鼠标移到轮播图那个区域才显示出来。点击下面的小圆点可以切换到相应的图片，有定时器可以自动轮播。

html： 要点：要给最前面添加最后一张图片作为附属图，在最后面添加第一张图片作为附属图，实现无缝轮播。给小圆点绑定一个自定义属性index用于标记当前index

 <div class="index-banner" id="banner">
    <div class="banner-list" id="banner-list" >
      <a href="javascript:;" class="banner3"></a>
      <a href="javascript:;" class="banner1"></a>
      <a href="javascript:;" class="banner2"></a>
      <a href="javascript:;" class="banner3"></a>
      <a href="javascript:;" class="banner1"></a>
    </div> 
    <div class="slide" id="slideBtn">
      <span index="1" class="active"></span>
      <span index="2"></span>
      <span index="3"></span>
    </div>
      <a href="javascript:;" id="prev" class="arrow"><</a>
        <a href="javascript:;" id="next" class="arrow">></a>
   </div>

css:

要点：里面的几张图片是通过div包起来，在给里面设置inline-block让它们可以在同一行也可以设置宽高，当然这里用ul li标签也是没问题的，然后通过position定位，设置div的left距离来实现轮播。

<style>
	.index-banner{
    position: relative;
    width: 600px;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
  }
  .banner-list{
    position: absolute;
    width: 3000px;
    height: 300px;
   left: -600px;

  }
  .banner-list a{
    display:block;
    float: left;
    width: 600px;
    height: 300px;

  }
  .banner1{
    background: url("images/bg1.jpg") no-repeat;
    background-size: 600px 300px;
  }
  .banner2{
    background: url("images/bg2.jpg") no-repeat;
    background-size: 600px 300px;
  }
  .banner3{
    background:url("images/bg3.jpg") no-repeat;
    background-size: 600px 300px;
  }
  .slide{
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 20px;
    transform:translateX(-50%);
  }
  .slide span{
    display: inline-block;
    cursor: pointer;
    margin-right: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
  }
  .slide .active{
    background-color: #000; 
  }
  .arrow{
    display: none;
    cursor: pointer;
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 50px;
    height: 70px;
    line-height: 70px;
    font-size: 35px;
    text-align: center;
    font-weight: bold;
    background-color: rgba(0,0,0,.3);
    color: #fff;
    vertical-align: middle;
    transform: translateY(-50%);
  }
  .arrow:hover{
    background-color: rgba(0,0,0,.7); 
  }
  .index-banner:hover .arrow{
    display: block;
  }
  #prev{
    left: 20px;
  }
  #next{
    right: 20px;
  }

js：

<script>	
      window.οnlοad=function(){
        var banner=document.querySelector('#banner');                               //获取用到的dom
        var list=document.querySelector('#banner-list');
        var slideBtn=document.querySelector('#slideBtn').querySelectorAll('span');
        var prev=document.querySelector('#prev');
        var next=document.querySelector('#next');
        var index=1;
        var animated=false;
        prev.οnclick=function(){                //设置点击前一张的事件，先通过判断当前index是否为第一个，如果是就把index指向最后一个，否则直接index-1，

          if(!animated){
            if(index===1){
            index=3;
          }else{
            index-=1;
          }
            animate(600);
            showBtn();
          }
          		//这如果animated是false，表示当前没有动画正在进行，可以进行图片移动，如果是true，即表示有动画在进行，即使我进行点击也是没
           			//有意义，必须当动画停止下来再可以执行，然后根据情况改变index，设置图片的位移，改变下标样式
        }
        next.οnclick=function(){
          if(index===3){
            index=1;
          }else{
            index+=1;			//同上
          }
          if(!animated){
           animate(-600);
          }
          showBtn();
        }
        function showBtn(){
          for(var i=0;i<slideBtn.length;i++){			//根据当前的index，用排他思想，把所有的下标设为没有active，再把第index-1个设为有的
            if(slideBtn[i].className==='active'){
              slideBtn[i].className='';
              break;
            }
          }
          slideBtn[index-1].className='active';
        }
        function animate(offset){
          animated=true;
          var newLeft=offset+list.offsetLeft;//位移后的位置
          var time=500; //移动总时长
          var interval=10; //移动的间隔时间
          var speed=offset/(time/interval); //每一次移动的位移
          //位移时每一次移动speed都调用该函数，为递归函数

          function go(){   
            if((speed<0&&list.offsetLeft>newLeft)||(speed>0&&list.offsetLeft<newLeft)){  //左边是代表向左移动，右边是向右，list.offsetLeft>newLeft代表当前
											//位置还没达到目标位置
              list.style.left=list.offsetLeft+speed+'px';		//既然没达到，那就需要移动图片	
           

            setTimeout(go,interval);					//递归调用此函数，每次移动一点点，直到当前位移等于目标，就跳到else
             }
             else{
              animated=false;						//动画结束，设为fales
              list.style.left=newLeft+'px';				//设置当前位移
              if(newLeft>-600){
                list.style.left='-1800px';				//如果当前图片是附属图片，那就切换到他真正的位置，因为两张图片是一样的，切换是一瞬间
              }								//的事情，所以看不出来
              if(newLeft<-1800){
                list.style.left='-600px';
              }
             }
          }
          go();

        }
        for(var i=0;i<slideBtn.length;i++){		//给下标绑定点击事件，用点击的index减去当前的index，再乘每张图片的-width，就可以得出应该位移的距离
          var button=slideBtn[i];			//因为乘的是负数，因此不用考虑向左移还是向右移这个问题。最后的offset如果是正的，就代表向右移，反之
          button.οnclick=function(){
            if(this.className==='active'){
              return;
            }
            
            var myIndex=parseInt(this.getAttribute('index'));

            var offset=-600*(myIndex-index);
            if(!animated){
               animate(offset);
            }
           
            index=myIndex;
            showBtn();
          }
        }
          var timer;
          function play(){				//设置一个定时器，自动执行next.onclick事件，自动轮播
            timer=setInterval(function(){
                next.onclick();
            },5000);
          }
          function stop(){
            clearInterval(timer);
          }
          banner.οnmοuseοver=stop;
          banner.οnmοuseοut=play;
          play();
      }
       </script>