1.HTML輪播框架
利用HTML先構(gòu)建出輪播的基本樣式，首先是包裹輪播圖的容器茴厉，在這里我將其class設(shè)置為carousel-wrapper.
然后再用這個(gè)容器去包含一個(gè)無(wú)序列表捺檬，列表里面的 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的樣式卒废，寬高以及居中,重點(diǎn)是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實(shí)現(xiàn)輪播效果
首先我們能想到的第一點(diǎn)是得有一個(gè)定時(shí)器，此處用的為setInterval喧兄；然后无畔，需要對(duì) li 的z-index屬性進(jìn)行設(shè)置，循環(huán)的讓圖片的z-index值變?yōu)?99吠冤。
但是實(shí)現(xiàn)過(guò)程中會(huì)發(fā)現(xiàn)存在兩個(gè)問(wèn)題檩互，第一就是最上層圖片其實(shí)是 ul 中的最后一個(gè)圖片，第二個(gè)問(wèn)題就是循環(huán)一遍之后咨演，不動(dòng)了闸昨。
針對(duì)以上兩個(gè)問(wèn)題，我們得有一個(gè)解決方法薄风，對(duì)于第一個(gè)問(wèn)題饵较，只需在最開始時(shí)執(zhí)行一次z-index代碼（具體看代碼，新手不知怎么總結(jié)語(yǔ)言）遭赂；對(duì)于第二個(gè)問(wèn)題循诉，我們先考慮到發(fā)生這種情況的原因---是因?yàn)檠h(huán)一次之后所有圖片的z-index全部變成了999，所以我們得找到一個(gè)解決方法----reset方法（使imgList中所有項(xiàng)的z-index初始化為1）即可撇他。
解決完這些情況之后茄猫，我還想實(shí)現(xiàn)鼠標(biāo)進(jìn)入輪播區(qū)域時(shí)就停止循環(huán)，出來(lái)時(shí)繼續(xù)困肩，這時(shí)我們就得給鼠標(biāo)綁定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，使當(dāng)前項(xiàng)的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中所有項(xiàng)的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)
})()
