實現(xiàn)輪播圖
思路：
通過js來控制輪播的圖片的樣式，可以控制display：none or block 可以控制opacity：‘0’ or ‘1’ 也可以通過z-index來控制圖片的擺放順序。
Html代碼：
這里的圖片一般是通過絕對定位放在一個div盒子里面，圖片堆疊在一起。
[if !supportLists]1.?[endif]首先固定外層框的寬度與長度width與height并且設(shè)置相對定位
<div id="main" style="width: height: 740px;position: relative;">
????????<div class="scollimg" style=" height: 740px;position: relative;overflow: hidden;">
????????????<img src="images/1.jpg" alt="">
????????????<img src="images/2.jpg" alt="">
????????????<img src="images/3.jpg" alt="">
????????</div>
????</div>
[if !supportLists]2.?[endif]將圖片顯示在一個框中，不讓圖片排列出來（設(shè)置圖片：display：absolute）
<img src="images/1.jpg" alt="" style="position: absolute;top: 0;left: 0;">
<img src="images/2.jpg" alt="" style="position: absolute;top: 0;left: 0;">
<img src="images/3.jpg" alt="" style="position: absolute;top: 0;left: 0;">
[if !supportLists]3.?[endif]設(shè)置左右移動的按鈕
<div class="btn" style="width: 100%; height: 220px;position: absolute;top:300px;">
????????????<div id="btnleft" style="position: absolute;left: 0;top: 0"><img src="images/up.svg" style="width: 100px"></div>
????????????<div id="btnright" style="position: absolute;right: 0;top: 0"><img src="images/next.svg" style="width: 100px"></div>
????????</div>
[if !supportLists]4.?[endif]設(shè)置下面顯示的點（顯示）
<div class="item" style="position: absolute;bottom: 30px;left: 48%;width: 200px;height: 16px;">
????????????<span style="width: 16px;height: 16px;background: #ccc;display: inline-block;border-radius: 50%;"></span>
????????????<span style="width: 16px;height: 16px;background: #ccc;display: inline-block;border-radius: 50%;"></span>
????????????<span style="width: 16px;height: 16px;background: #ccc;display: inline-block;border-radius: 50%;"></span>
????????</div>
[if !supportLists]5.?[endif]頁面設(shè)置完了之后，需要設(shè)置行為（js）
var imgs=document.getElementsByClassName("carousel_img");
????????????var spans=document.getElementsByClassName("carousel_span");
????????????function InitMove(index){
????????????????for(var i=0;i<imgs.length;i++){
????????????????????imgs[i].style.opacity='0';
????????????????????spans[i].style.background='#ccc';
????????????????}
????????????????imgs[index].style.opacity='1';
????????????????spans[index].style.background='red';
????????????}
主要功能是將index的東西，將其設(shè)置透明度為1，下面的span背景設(shè)置成red
//第一次初始化，將第一個圖片顯示出來
????????????InitMove(0);
//設(shè)置當圖片到最后一張的時候，自動返回到第一個，否則++將count傳遞過去
var count=1;
????????????function fMove(){
????????????????if(count==imgs.length){
????????????????????count=0;
????????????????}
????????????????InitMove(count);
????????????????count++;
????????????}
//設(shè)置自動輪播定時器；
????????????var scollMove=setInterval(fMove,2500);
//點擊下一張和上一張的事件
????????????var btnleft=document.getElementById('btnleft');
????????????var btnright=document.getElementById('btnright');
????????????btnleft.onclick=function(){
????????????????clearInterval(scollMove);
????????????????if(count==0){
????????????????????count=imgs.length;
????????????????}
????????????????count--;
????????????????InitMove(count);
????????????????scollMove=setInterval(fMove,2500);
????????????};
btnright.onclick=function(){
????????????????clearInterval(scollMove);
????????????????fMove();
????????????????scollMove=setInterval(fMove,2500);
????????????};
//鼠標浮動在上方的時候，停止定時器，當鼠標移出來時，重新開始定時器
var ?scollimg = document.getElementById("scollimg");
scollimg.onmouseover=function(){
console.log('hover');
clearInterval(scollMove);
};
scollimg.onmouseout=function(){
console.log('hoverout');
scollMove=setInterval(fMove,2500);
};
