轮播图 3.0

一、前情回顾

上一篇博客 轮播图 — 英勇青铜版 已经实现了点击切换图片、显示指示器的功能，可以被称作为轮播图，但是，一般的轮播图都有自动轮播的功能（即不用点击切换按钮，图片会自动的切换，方便用户浏览），今天这一版本就将自动轮播功能实现。话不多说，赶紧上车。

二、具体实现

1、HTML 代码：实现自动轮播功能不需要改动 HTML 代码，所以这里与上一版本的代码没有区别。

<div class="wrap">
	<ul class="list">
		<li class="item active" style="background-color: red;"></li>
		<li class="item" style="background-color: orange;"></li>
		<li class="item" style="background-color: yellow;"></li>
		<li class="item" style="background-color: green;"></li>
	</ul>
	<ul class="pointlist">
		<li class="point active" data-index='0'></li>
		<li class="point" data-index='1'></li>
		<li class="point" data-index='2'></li>
		<li class="point" data-index='3'></li>
	</ul>
	<button class="btn" id="goPre"><</button>
	<button class="btn" id="goNext">></button>
</div>

2、CSS 代码：实现自动轮播功能不需要改动 CSS 代码，所以这里与上一版本的代码没有区别。

<style type="text/css">
	*{margin: 0;padding: 0;}
	.wrap{width: 650px;height: 240px;position: relative;}
	.list{list-style: none;position: relative;}
	.item{width: 650px;height: 240px;position: absolute;opacity: 0;-webkit-transition: all 2s;}
	.btn{width: 30px;height: 40px;position: absolute;top: 100px;z-index: 3;}
	#goPre{left: 0;}
	#goNext{right: 0;}
	.item.active{z-index: 2;opacity: 1;}
	.pointlist{list-style: none;position: absolute;right: 20px;bottom: 20px;z-index: 3;}
	.point{width: 10px;height: 10px;background-color: rgba(0,0,0,0.4);border-radius: 100%;
			float: left;margin-left: 10px;cursor: pointer;}
	.point.active{background-color: white;}
</style>

3、JavaScript 代码：在上一版本的基础上，添加定时器：setInterval 函数，实现图片的自动轮播。

<script type="text/javascript">
	window.onload = function(){
		var items = document.getElementsByClassName('item');
		var points = document.getElementsByClassName('point');//点
		var goPreBtn = document.getElementById('goPre');
		var goNextBtn = document.getElementById('goNext');
		
		var index = 0;//index 表示第几张图片在展示，表示第几张图片有active类名
		              //同时也表示第几个指示器在高亮 - 第几个指示器有active类名
		
		function clearActive(){    //展示下一张之前先将所有图片和指示器的active类名取消掉
			for (var i=0;i<items.length;i++) {
				items[i].classList.remove("active");
				points[i].classList.remove("active");
			}
		}
		
		function goIndex(){    //将要展示的图片和指示器添加上active类名
			clearActive();    //调用上面的clearActive()方法，取消所有图片和指示器的active类名
			items[index].classList.add("active");
			points[index].classList.add("active");
		}
		
		function goNext(){    //定义切换到下一张的函数
			if(index < 3)
				index ++;
			else
				index = 0;
			goIndex();
		}
		
		function goPre(){    //定义切换到上一张的函数
			if(index == 0)
				index = 3;
			else
				index--;
			goIndex();
		}
		
		
		goNextBtn.onclick = function(){    //给下一张按钮添加鼠标点击事件
			goNext();
		}
		
		goPreBtn.onclick = function(){    //给上一张按钮添加鼠标点击事件
			goPre();
		}
		
		for (var i=0;i<points.length;i++) {    //给指示器添加点击事件
			points[i].onclick = function(){
				var pointIndex = this.getAttribute('data-index');//获取当前指示器的data-index
				index = pointIndex;    //将当前指示器的data-index 赋值给 index
				goIndex();    //调用 goIndex()方法，切换到指定的 index 图片和指示器
			}
		}
		
		setInterval(function(){        //设置定时器
			goNext();            //调用goNext()函数，实现自动轮播
		},1000)
		
	}
</script>

三、效果图

四、性能分析

当前这一版本已经实现了点击切换图片、显示指示器和自动轮播的功能，轮播图大体的特征都具备了，但是，这里的定时器存在一个问题，设置的一秒钟切换一张图片，如果中途点击指定图片的话，会在很快切换到下一张，不是重新计时，这样的效果其实并不好。针对这一问题，我们在下一版本对其进行改进。