1.HTML輪播框架

利用HTML先構(gòu)建出輪播的基本樣式，首先是包裹輪播圖的容器，在這里我將其class設(shè)置為carousel-wrapper.
然后再用這個容器去包含一個無序列表，列表里面的 li 中放置圖片。結(jié)構(gòu)基本完成。

    <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輪播樣式

設(shè)置carousel-wrapper的樣式，寬高以及居中,重點是position的設(shè)置，得理解absolute和relative的用處及區(qū)別。

.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實現(xiàn)輪播效果

首先我們能想到的第一點是得有一個定時器，此處用的為setInterval；然后，需要對 li 的z-index屬性進行設(shè)置，循環(huán)的讓圖片的z-index值變?yōu)?99。
但是實現(xiàn)過程中會發(fā)現(xiàn)存在兩個問題，第一就是最上層圖片其實是 ul 中的最后一個圖片，第二個問題就是循環(huán)一遍之后，不動了。
針對以上兩個問題，我們得有一個解決方法，對于第一個問題，只需在最開始時執(zhí)行一次z-index代碼（具體看代碼，新手不知怎么總結(jié)語言）；對于第二個問題，我們先考慮到發(fā)生這種情況的原因---是因為循環(huán)一次之后所有圖片的z-index全部變成了999，所以我們得找到一個解決方法----reset方法（使imgList中所有項的z-index初始化為1）即可。
解決完這些情況之后，我還想實現(xiàn)鼠標進入輪播區(qū)域時就停止循環(huán)，出來時繼續(xù)，這時我們就得給鼠標綁定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變?yōu)?99
     */
    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)
})()