JS实现轮播

1.HTML轮播框架

利用HTML先构建出轮播的基本样式，首先是包裹轮播图的容器，在这里我将其class设置为carousel-wrapper.
然后再用这个容器去包含一个无序列表，列表里面的 li 中放置图片。结构基本完成。

    <div class="carousel-wrapper">
        <ul class="carousel-list">
            <li class="carousel-item">
                <img src="img/1.png" alt="" class="img">
            </li>
            <li class="carousel-item">
                <img src="img/2.png" alt="" class="img">
            </li>
            <li class="carousel-item">
                <img src="img/3.png" alt="" class="img">
            </li>
            <li class="carousel-item">
                <img src="img/4.png" alt="" class="img">
            </li>
        </ul>
    </div>

2.CSS轮播样式

设置carousel-wrapper的样式，宽高以及居中,重点是position的设置，得理解absolute和relative的用处及区别。

.carousel-wrapper{
    width: 820px;
    height: 512px;
    margin: 0 auto;
    padding: 0;
    border: none;
    overflow: hidden;
}

.carousel-list{
    list-style: none;
    position: relative;
}

.carousel-item{
    position: absolute;
} 

3.JS实现轮播效果

首先我们能想到的第一点是得有一个定时器，此处用的为setInterval；然后，需要对 li 的z-index属性进行设置，循环的让图片的z-index值变为999。
但是实现过程中会发现存在两个问题，第一就是最上层图片其实是 ul 中的最后一个图片，第二个问题就是循环一遍之后，不动了。
针对以上两个问题，我们得有一个解决方法，对于第一个问题，只需在最开始时执行一次z-index代码（具体看代码，新手不知怎么总结语言）；对于第二个问题，我们先考虑到发生这种情况的原因---是因为循环一次之后所有图片的z-index全部变成了999，所以我们得找到一个解决方法----reset方法（使imgList中所有项的z-index初始化为1）即可。
解决完这些情况之后，我还想实现鼠标进入轮播区域时就停止循环，出来时继续，这时我们就得给鼠标绑定mouseenter和mouseleave事件。
到这里，基本的轮播就算做完了。

(function(){
    var imgList = document.getElementsByClassName('carousel-item')
    var len = imgList.length
    var now = 0
    var carouselW = document.getElementsByClassName('carousel-wrapper')[0]
    var timer = null
    imgList[now].style.zIndex = '999'
    now++
    /**
     * add方法，定义setInterval，使当前项的z-index变为999
     */
    var add = function(){
        timer = setInterval(function(){
            reset()
            imgList[now].style.zIndex = '999'
            now++
            if(now > 3){
                now = 0
            }
        },1000)
    }
    add()
    /**
     * reset方法，使imgList中所有项的z-index初始化为1
     */
    var reset = function(){
        for(var i = 0;i < len;i++){
            imgList[i].style.zIndex = '1'
        }
    }
    // mouseenter qingchu timer
    carouselW.addEventListener('mouseenter', function(){
        clearInterval(timer)
    },false)
    carouselW.addEventListener('mouseleave',function(){
            add()
    },false)
})()