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);
}

结束语：

轮播图的套路其实都差不多，掌握其思路，便可一通百通。