原生js实现一个简单的轮播图

想锻炼一下自己的原生js能力可以从写一个轮播图开始，轮播图的运用想必大家都知道吧，好了废话不多说，开始记笔记了，一些需要注意的点，我都在代码中标注了

首先是构造html：

<div id="container">
    <div id="list" style="left:-600px">
 <img src="img/4.jpg" alt="4">
<img src="img/1.jpg" alt="1">
<img src="img/2.jpg" alt="2">
<img src="img/3.jpg" alt="3">
<img src="img/4.jpg" alt="4">
<img src="img/1.jpg" alt="1">
    </div>
    <div id="buttons">
<span index=1 class="on"></span>
<span index=2></span>
<span index=3></span>
<span index=4></span>
    </div>
<a  id="prev" class="arrow"></a>
<a  id="next" class="arrow"></a>
</div>

这里需要讲一下的是图片本来是4个，但是需要把第4个和第一个分别多加入到第一个位置和最后一个位置，（为何要这一步？是为了实现无缝播放，由于移动时，为了让用户感觉到第4个图片播放完之后，是第一个图片，必须将第4个图片放到第一个图片的前面）并且设置list的偏移量为-600px（-600px是由于设置时将图片4放置在list的第一个位置，而要显示的是图片1，此时图片1的位置是-600px）

然后设置css参数

*
        {
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        body
        {
            padding: 20px;
        }
        #container
        {   position: relative;
            overflow: hidden;
            width: 500px; height: 500px; border: 3px solid rgb(247, 250, 203);
        }/*容器宽高为图片的宽度和高度*/
        #list
        {   position: absolute;
            z-index: 1;
            width: 3000px; /*list的所有图片数和图片的乘积*/
            height: 500px;
        }
        #list img
        {
            float: left;
            width: 500px;/*规定的图片的宽度*/
        }
        #buttons
        {
            position: absolute;
            z-index: 2;
            bottom: 20px;
            left: 250px;
            width: 100px;
             height: 10px;
        }
        #buttons span
        {float: left;
            width: 10px;
            height: 10px;
            margin-right: 5px;

            cursor: pointer;
            border: 1px solid #fff;
             border-radius: 50%;
             background: rgb(141, 139, 139);
        }
        #buttons .on
        {
            background:pink;
        }
        .arrow
        {font-size: 36px;
            font-weight: bold;
            line-height: 39px;
            position: absolute;
            z-index: 2;
            top: 180px;
            display: none;
             width: 40px;
             height: 40px;
            cursor: pointer;
            text-align: center;
            color:pink;
            background-color: rgb(229, 247, 194);
        }
        .arrow:hover
        {
            background-color:rgb(194, 212, 156) ;
        }
        #container:hover .arrow
        {
            display: block;
        }
        #prev
        {
            left: 20px;
        }
        #next
        {
            right: 20px;
        }
       

最后是js逻辑：

 var  prev=document.getElementById("prev");
     var  next=document.getElementById("next");
     var  list=document.getElementById("list");
     var buttons=document.getElementById("buttons").getElementsByTagName("span");
     var index=1;
     var timer;
     var animated=false;
     var container=document.getElementById("container");

function shownButton(){
    for(var i=0;i<buttons.length;i++){
        if(buttons[i].className=="on"){
             buttons[i].className="";
             break;
        }
    }
    buttons[index-1].className="on";
}
function animate(offset){
    var time=100;//根据图片宽度来，最好和inteval相除为整数，不然后面移动会出问题，
    var inteval=10;
    var speed=offset/(time/inteval);
    animated=true;
    var newLeft=parseInt(list.style.left)+offset;
    function go(){
        if((speed>0&&parseInt(list.style.left)<newLeft)||(speed<0&&parseInt(list.style.left)>newLeft)){
                list.style.left=parseInt(list.style.left)+speed+"px";
                setTimeout(go,inteval);//递归函数
        }
   else{
       animated=false;
      if(newLeft>-500){//当大于第一个图的位移量切换到第4张图
             list.style.left=-2000+"px";
         };
         if(newLeft<-2000){//当小于最后一个图的位移量切换到第一张图
             list.style.left=-500+"px";
         }
   }
    }
     go();
     }
  prev.onclick=function(){
      if(!animated){
          if(index==1){
              index=4;//根据自己代码的index值进行修改
          }
          else{
              index-=1;
          }
          shownButton();
          animate(500);//传入图片宽度
      }
  }
  next.onclick=function(){
      if(!animated){
          if(index==4){//根据自己代码的index值进行修改
              index=1;
          }
          else{
              index+=1;
          }
          shownButton();
          animate(-500);//第一章图片宽度
      }
  }
  for(var i=0;i<buttons.length;i++){
      buttons[i].onclick=function(){
          if(this.className=="on"){
              return;
          }
          var myIndex=parseInt(this.getAttribute(index));
          var offset=-500*(myIndex-index);//偏移量根据实际情况修改
          if(!animated){
              animate(offset);
          }
          index=myIndex;
          shownButton();
      }
  }
  function play(){
      timer=setInterval(function(){
          next.onclick();
      },2000);  }
      function stop(){
          clearInterval(timer);
      }
      play();
      container.onmouseover=stop;
      container.onmouseout=play;
 

完整的代码可以去我的github下载，欢迎各位点星星和fork

https://github.com/narrow-gate/lunbo