JS實現小米輪播圖

效果展示：

簡要：

小米的輪播圖，效果就是“淡入淡出”、“鼠標移上去停止自動輪播”、“鼠標移開繼續自動輪播”。差不多是這麼一個效果了。

JS必要的知識：

• 事件
  1. onclick //點擊事件
  2. onmouseover //鼠標移入
  3. onmouseout //鼠標移出
• 函數
  1. setInterval() //自動函數
  2. clearInterval() //清除自動函數
     
     

常見的bug：

1. 相信你們在自動輪播時，同時快速的點擊上下切換按鈕，會發現頁面會開始不美觀了，這個bug相信很多人都遇見過。

2. 還有就是當快自動輪播到下一張的時候，突然手動切換了一下圖片（舉個例子：假設自動輪播時間爲2s，當1.6s時，你點擊了一下上一張，此時剩下0.4s，0.4s過後又會自動輪播到下一張）這個時間實在是太快了。

以上bug的解決：

請看我JS代碼部分的自動輪播(autoPlay函數)，我相信你們可以看懂。

開始上代碼

body部分：

<div class="banner">
    <!-- 輪播圖片 -->
    <div class="bannerImg">
        <ul>
            <li class="on">
                <img src="images/1.png" width="1226" height="460" />
            </li>
            <li>
                <img src="images/2.png" width="1226" height="460" />
            </li>
            <li>
                <img src="images/3.png" width="1226" height="460" />
            </li>
            <li>
                <img src="images/4.png" width="1226" height="460" />
            </li>
            <li>
                <img src="images/5.png" width="1226" height="460" />
            </li>
        </ul>
    </div>
    <!-- 上一張 -->
    <div class="left"></div>
    <!-- 下一張 -->
    <div class="right"></div>
    <!-- 小按鈕 -->
    <div class="dian">
        <ul>
            <li class="items on" onclick="buttonClick(0)"></li>
            <li class="items" onclick="buttonClick(1)"></li>
            <li class="items" onclick="buttonClick(2)"></li>
            <li class="items" onclick="buttonClick(3)"></li>
            <li class="items" onclick="buttonClick(4)"></li>
        </ul>
    </div>
</div>

CSS部分：

*{
	padding: 0;
	margin: 0;
}
body{
	background-color: rgba(0,0,0,.4);
}
.banner{
	width: 1226px;
	height: 460px;
	margin: 30px auto 0;
	position: relative;
}
.banner .bannerImg ul{
	list-style-type: none;
}
.banner .bannerImg li{
	position: absolute;
	opacity: 0;
	transition: opacity 2s;
}
/* 圖片的隱藏與顯示 */
.banner .bannerImg li.on{
	opacity: 1;
}
/* 左右 */
.left,
.right{
	width: 41px;
	height: 69px;
	position: absolute;
	top: 50%;
	margin-top: -34.5px;
	border-radius: 5px;
}
.left{
	background: url(../images/icon-slides.png) no-repeat -84px 0;
	margin-left: 20px;
}
.right{
	background: url(../images/icon-slides.png) no-repeat -126px 0;
	right: 20px;
}
.left:hover{
	background: url(../images/icon-slides.png) no-repeat;
}
.right:hover{
	background: url(../images/icon-slides.png) no-repeat -44px 0;
}
/* 點 */
.dian{
	position: absolute;
	bottom: 20px;
	right: 20px;
}
.dian ul{
	list-style-type: none;
}
.dian ul li{
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin: 0 4px;
	float: left;
	border: 2px solid rgba(255,255,255,.6);
	background-color: rgba(0,0,0,.4);
	cursor: pointer;
}
/* 小按鈕的點擊樣式 */
.dian ul .items.on{
	border: 2px solid rgba(0,0,0,.6);
	background-color: rgba(255,255,255,.4);
}

JS部分：

var time = 0;//2秒後自動換圖
var timeId = -1;//自動函數的ID值，默認-1
var banner = document.querySelector(".banner");//獲取banner
var bannerImg = document.querySelectorAll(".bannerImg li");//獲取所有的li(圖片)
var dian = document.querySelectorAll(".dian li");//獲取所有的小按鈕
var right = document.getElementsByClassName("right")[0];//獲取點擊下一張
var left = document.getElementsByClassName("left")[0];//獲取點擊上一張
index = 0;//圖片索引

// 點擊下一張
right.onclick=function(){
    changeImg(true);
}

// 點擊上一張
left.onclick=function(){
    changeImg(false);
}

// 自動輪播
function autoPlay(){
    timeId  = setInterval(function(){
        time++;
        if(time == 20){
            time = 0;
            changeImg(true);
        }
    },100);
}

autoPlay();

// 當鼠標移上banner空間時，停止自動輪播
banner.onmouseover=function(){
    clearTimeout(timeId);
}
// 當鼠標移開banner空間時，繼續自動輪播
banner.onmouseout=function(){
    autoPlay();
}


// 清除樣式
function clearStyle(index){
    // 清除上一個樣式
    bannerImg[index].className = "";
    dian[index].className = "items";
}

// 添加樣式
function addStyle(index){
    // 添加樣式
    bannerImg[index].className = "on";
    dian[index].className = "items on";
}


/* 
	更改圖片和小按鈕樣式
	flag:
		true:下一張
		false:上一張
*/
function changeImg(flag){
    time = 0;//用來阻止2秒後自動換圖的bug
    clearStyle(index);
    // 判斷是上一張還是下一張
    if(flag){
        // 下一張
        index++;
        index %= 5;
    }else{
        // 上一張
        index--;
        if(index<0) index = 0;
    }
    addStyle(index);
}

/* 
	點擊小按鈕切換到對應圖片
*/
function buttonClick(num){
    time = 0;//用來阻止2秒後自動換圖所產生的小bug
    clearStyle(index);
    index = num;
    addStyle(index);
}

結束語：

輪播圖的套路其實都差不多，掌握其思路，便可一通百通。