轮播图JS代码

<div class="wrapper">
        <ul class="sliderPage">
            <li><img src="image/1.jpg" alt=""></li>
            <li><img src="image/2.jpg" alt=""></li>
            <li><img src="image/3.jpg" alt=""></li>
            <li><img src="image/4.jpg" alt=""></li>
            <li><img src="image/1.jpg" alt=""></li>
        </ul>
        <div class="btn leftBtn">&lt;</div>
        <div class="btn rightBtn">&gt;</div>
        <div class="sliderIndex">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script src="js/index.js"></script>

轮播图的相关组件元素以及图片的导入，设置div，ul，span的class，上面有2张1.jpg图片是为了在第一张和第四张图片切换时能够无缝切换。

	  var sliderPage=document.getElementsByClassName("sliderPage")[0];
      var moveWidth=sliderPage.children[0].offsetWidth;
      var num=sliderPage.children.length -1;
      var lock=true;
      var leftBtn=document.getElementsByClassName("leftBtn")[0];
      var rightBtn=document.getElementsByClassName("rightBtn")[0];
      var timer=setTimeout(autoMove,2500);
      console.log(leftBtn);
      leftBtn.onclick=function(){
          autoMove("pre");
      }
      rightBtn.onclick=function(){
          autoMove("next")
      }

声明获取相关元素节点，设置2个点击事件用来切换到上一张图片和下一张图片；设置了一个计时器timer，没2500毫秒调用一次autoMove函数。

如图有两个div按钮可以操作切换图片。

 	function autoMove(direction){
          if(lock){
              lock=false;
              clearTimeout(timer);
              if(!direction || direction=="next"){
                 startMove(sliderPage,{left:sliderPage.offsetLeft - moveWidth},
                 function(){
                      if(sliderPage.offsetLeft== - num * moveWidth){
                          sliderPage.style.left="0px";
                      }
                      var timer=setTimeout(autoMove,2500);
                      lock=true;
                  })
              }
              else if(direction=="pre"){
                  if(sliderPage.offsetLeft==0){
                      sliderPage.style.left=- num * moveWidth +"px";
                  }
                 startMove(sliderPage,{left:sliderPage.offsetLeft + moveWidth},
                 function(){
                      timer = setTimeout(autoMove,2500)
                      lock = true;
                      var timer=setTimeout(autoMove,2500);
                      lock=true;
              })
          }
          }
      }

autoMove函数通过if判断循环调用timer计时器实现了图片自动轮播，通过点击div触发事件改变if判定结果，从而修改ul.style.left的值来实现图片的切换和自动轮播，通过判断 sliderPage.style.left的值来判断图片是第一张还是最后一张，然后进行图片切换；把计时器写在回调函数中，可以在函数执行结束后再调用计时器(也就是等上一张图片移动结束后,才会执行接下来的操作)。

这里记得使用setTimeout延时计时器,不要使用循环计时器,循环计时器会导致在点击左右切换图片时,上一个计时器还没有结束,就调用下个计时器,导致图片移动会出现一点问题。
上面的lock（开关思想）也是为了等一张图片移动结束后在进行其他操作。

function startMove(dom, attrObj,callback) {
    clearInterval(dom.timer)
    var iSpeed = null,
        iCur = null;  //步长(元素样式变化的长度)
    dom.timer = setInterval(function () {
        var bStop = true;
        for (var attr in attrObj) {
            if (attr == "opacity") {
                iCur = parseFloat(getStyle(dom, attr)) * 100
            } else {
                iCur = parseFloat(getStyle(dom, attr))
            }
            iSpeed = (attrObj[attr] - iCur) / 7;
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed)
            if (attr == "opacity") {
                dom.style.opacity = (iCur + iSpeed) / 100
            } else {
                dom.style[attr] = iCur + iSpeed + "px"
            }
            if(iCur != attrObj[attr]){
                bStop = false
            }
        }
        if(bStop){
            clearInterval(dom.timer)
            typeof callback == "function" && callback()
        }
    }, 30)
}
function getStyle(dom,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(dom,null)[attr]
    }else{
        return dom.currentStyle[attr]
    }
}

上面startMove、getStyle函数封装一个获取元素节点样式以及相关样式的移动变化方法，通过，直接获取该函数，直接调用里面的方法，来实现我们的轮播图。