原生js实现轮播图，兼容IE

html部分：

<div class ="wrapper">
   <ul class="sliderPage">
       <li>
           <img src ="./image/1.png">
       </li>
       <li>
           <img src ="./image/2.png">
       </li>
       <li>
           <img src ="./image/3.jpg">
       </li>
       <li>
           <img src ="./image/4.jpg">
       </li>
       <li>
           <img src ="./image/1.png">
       </li>
   </ul>
   <!-- 左右两侧按钮 -->
   <div class="btn btnLeft">&lt;</div>
   <div class="btn btnRight">&gt;</div>
   <!-- 轮播按钮 -->
   <div class="sliderIndex">
       <span class = "active"></span>
       <span></span>
       <span></span>
       <span></span>
   </div>
</div>

css部分：

*{
    padding:0;
    margin:0;
    list-style:none;
}
.wrapper{
   position: relative;
   margin:100px auto;
   width:400px;
   height:250px;
   overflow: hidden;
}
.wrapper .sliderPage{
    position: absolute;
    top:0;
    left:0;
    width:2000px;
    height:250px;
}
.wrapper .sliderPage li{
    width:400px;
    height:250px;
    float:left;
}
.wrapper .sliderPage li img{
    width:400px;
    height:250px;
}
.wrapper .btn{
   position: absolute;
   top:50%;
   margin-top:-20px;
   width:40px;
   height:40px;
   color:#fff;
   background:#000;
   text-align:center;
   line-height:40px;
   opacity:0.1;
   cursor: pointer;
}
.wrapper:hover .btn{
    opacity:0.3;
}
.wrapper .btn:hover{
    opacity:0.7;
}
.wrapper .btnLeft{
    left:5px;
}
.wrapper .btnRight{
   right:5px;
}
.wrapper .sliderIndex{
    position: absolute;
    width:100%;
    bottom:15px;
    text-align:center;
}
.wrapper .sliderIndex span{
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:50%;
    background: #ccc;
    margin:0 5px;
    cursor: pointer;
}
.wrapper .sliderIndex span.active{
   background:#f40;
}

js部分：

<script>     
    var wrapper = document.querySelector('.wrapper');
    (function(demo){
        var timer = null,
            sliderPage = demo.querySelector('.sliderPage'), //存储轮播图的ul
            sliderChidren = sliderPage.children, //ul下的子标签集
            moveWidth = sliderChidren[0].clientWidth, //轮播图的宽度
            num = sliderChidren.length-1, //有多少个li就知道有多少个图片在进行轮播
            btnLeft = demo.querySelector('.btnLeft'), //轮播图左侧按钮
            btnRight = demo.querySelector('.btnRight'),// 轮播图右侧按钮
            oSpanArray = demo.querySelector('.sliderIndex').querySelectorAll('span'),
            isLock = true,
            index = 0; 

        //轮播图自动轮播
        //timer = setInterval(autoMove,1500);
        timer = setTimeout(autoMove,1500);

        //点击轮播图左侧按钮
        btnLeft.onclick = function(){
            autoMove('left->right')
        }
        //点击轮播图右侧按钮
        btnRight.onclick = function(){
            autoMove('right->left')
        }

        for(var i = 0;i<oSpanArray.length;i++){
            (function(j){
                oSpanArray[j].onclick = function(){
                    isLock = false;
                    clearTimeout(timer)
                    index = j;
                    startMove(sliderPage,{left:- index * moveWidth},function(){
                        isLock = true;
                        timer = setTimeout(autoMove,1500);
                        changeIndex(index)
                    })
                }
            }(i))

        }

        function autoMove(direction){ 
            //direction 轮播方向
            /*
                默认轮播方向是 “left -> right” / undefined
                点击左侧left按钮 轮播方向 ‘right -> left’
                在自动轮播的时候未传递参数，其值为undefined
            */
            clearTimeout(timer)
            if(isLock){
                isLock = false;
                if(!direction || direction == 'left->right'){    
                    index ++;   
                    startMove(sliderPage,{left:sliderPage.offsetLeft - moveWidth},function(){
                        if(sliderPage.offsetLeft == - num * moveWidth){
                            index = 0;
                            sliderPage.style.left = "0px";
                        }
                        timer = setTimeout(autoMove,1500);
                        isLock = true;
                        changeIndex(index)
                    })
                }else if(direction == "right->left"){
                    if(sliderPage.offsetLeft == 0){
                        index = num;
                        sliderPage.style.left = - num *moveWidth + 'px';
                    }
                    index --;
                    startMove(sliderPage,{left:sliderPage.offsetLeft + moveWidth},function(){   
                        isLock = true;
                        timer = setTimeout(autoMove,1500);
                        changeIndex(index)
                    })
                }
            }
        }  

        function changeIndex(_index){
            for(var i = 0;i<oSpanArray.length;i++){
                oSpanArray[i].className = '';
            }
            oSpanArray[_index].className = "active";
        }

    }(wrapper))
//demo的运动
    function startMove(demo, json, callback) {
        clearInterval(demo.timer);
        var speed, cur;
        demo.timer = setInterval(function () {
            var bStop = true;
            for (var prop in json) {
                if (prop == 'opacity') {
                    cur = parseFloat(getStyle(demo, 'opacity')) * 10;
                } else {
                    cur = parseInt(getStyle(demo, prop));
                }
                speed = (json[prop] - cur) / 7;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                if (prop == 'opacity') {
                    demo.style.opacity = (cur + speed) / 10;
                } else {
                    demo.style[prop] = cur + speed + 'px';
                }
                if (json[prop] !== cur) {
                    bStop = false;
                }
            }
            if (bStop) {
                clearInterval(demo.timer);
                typeof callback == 'function' ? callback() : '';
            }
        }, 30)
    }

//解决获取样式的兼容问题
    function getStyle(obj, attr) {
        if (obj.currentStyle) {  //IE6以下
            return obj.currentStyle[attr]
        } else {
            return window.getComputedStyle(obj, null)[attr]
        }
    }

</script>