Javascript实例之“轮播图”效果

初学js语言的朋友都知道，“轮播图”效果是我们必学的一大难点。既要用定时器实现自动播放功能，又要实现用户点击向左或向右的手动切换功能，还要实现指示图标的点击切换图片功能。要应用到的知识点很丰富。

实现轮播图的方法有多种。现在，本作把自己的代码放出来给有需要的朋友参考一下：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>heartmv.com</title>
		<style>
			* {
				margin: 0;
				padding: 0
			}

			html {
				font-size: 15px;
			}

			.box {
				width: 50rem;
				height: 32rem;
				border: 3px dashed red;
				margin: 15px 0;
				position: relative;
				left: 50%;
				top: 5%;
				transform: translate(-50%, 0);
				overflow: hidden;
			}

			.box>ul {
				width: 500%;
				height: 32rem;
				position: absolute;
			}

			.box>ul>li {
				width: 50rem;
				height: 32rem;
				list-style: none;
				float: left;
			}

			.box li img {
				width: 50rem;
				height: 32rem;
			}

			.box>ol {
				position: absolute;
				left: 50%;
				bottom: 15px;
				transform: translate(-50%, 0);
			}

			.box>ol>li {
				width: 1.5rem;
				height: 1.5rem;
				list-style: none;
				margin-left: 15px;
				float: left;
				border-radius: 1.5rem;
				background: rgba(191, 0, 3, 0.5);
				cursor: pointer;
			}

			.box>ol>li.now {
				width: 3rem;
			}

			.box span {
				color: #00f;
				display: none;
				width: 6rem;
				text-align: center;
				height: 32rem;
				line-height: 32rem;
				font-size: 5rem;
				position: absolute;
				top: 0;
				cursor: pointer;
			}

			.box span:hover {
				background: rgba(110, 110, 110, 0.3);
			}

			.box>.spanL {
				left: 0;
			}

			.box>.spanR {
				right: 0;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<ul>
				<li>
					<a href="javascript:;">
						<img src="images/game_001.jpg" alt="轮播图">
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="images/game_002.jpg" alt="轮播图">
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="images/game_003.jpg" alt="轮播图">
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="images/game_004.jpg" alt="轮播图">
					</a>
				</li>
			</ul>

			<!--轮播图指示图标-->
			<ol>
				<li class="now"></li>
				<li></li>
				<li></li>
				<li></li>
			</ol>

			<!--向左向右图标-->
			<span class="spanL">‹</span>
			<span class="spanR">›</span>
		</div>

		<script>
			var box = document.querySelector('.box');
			var ul = document.querySelector('ul');
			var ol = document.querySelector('ol');
			var spanL = document.querySelector('.spanL');
			var spanR = document.querySelector('.spanR');
			//鼠标移入时向左、向右图标显示
			box.addEventListener('mouseenter', function() {
				spanL.style.display = 'block';
				spanR.style.display = 'block';
				//停止定时器
				clearInterval(timer);
			})
			//鼠标移出时向左、向右图标隐藏
			box.addEventListener('mouseleave', function() {
				spanL.style.display = 'none';
				spanR.style.display = 'none';
				//运行定时器
				timer=setInterval(function(){
					//调用向右运动事件
					spanR.click();
				},3000);
			})
//动画函数
			function run(obj, target, callback) { //obj指运动的对象，target指目标运动距离，callback指回调函数
				clearInterval(obj.timer);
				obj.timer = setInterval(function() {
					if (obj.offsetLeft === target) {
						clearInterval(obj.timer);
						//回调函数要等到定时器函数运行结束才能运行
						if (callback) { //若存在回调函数就调用
							callback();
						};
					} else {
						//设置动画的步长值变量bc，使运行速度逐渐变小
						var bc = (target - obj.offsetLeft) / 10 > 0 ? Math.ceil((target - obj.offsetLeft) / 10) : Math.floor((target -
							obj.offsetLeft) / 10);
						obj.style.left = obj.offsetLeft + bc + 'px';
					};
				}, 15);
			}
//要实现无缝滚动，需要将第一张轮播图复制并添加到最后(注意：ul的宽度也要相应增加)
			var imglast = ul.children[0].cloneNode(true);
			ul.appendChild(imglast);
			var num = 0; //代替轮播图的序号
			var num2 = 0; //代替轮播图指示图标的序号
			var lis = ol.children.length;
			var flag = true; //此变量用于阻止快速点击时导致运动过快的情况 
			//点击向右图标，向右运动
			spanR.addEventListener('click', function() {
				if (flag) {
					flag = false;
					if (num === ul.children.length - 1) { //注意num的判断条件必须写在num++的前面
						num = 0;
						ul.style.left = 0;
					}
					num++;
					//轮播图指示图标
					for (var i = 0; i < lis; i++) {
						ol.children[i].className = '';
					}
					num2++;
					if (num2 === lis) {
						num2 = 0;
					}
					ol.children[num2].className = 'now';
					//调用运动函数
					run(ul, -num * ul.children[0].offsetWidth, function() {
						flag = true;
					});
				}
			})
			//点击向左图标，向左运动
			spanL.addEventListener('click', function() {
				if (flag) {
					flag = false;
					if (num === 0) {
						num = ul.children.length - 1;
						ul.style.left = -num * ul.children[0].offsetWidth + 'px';
					}
					num--;
					//轮播图指示图标
					for (var i = 0; i < lis; i++) {
						ol.children[i].className = '';
					}
					num2--;
					if (num2 < 0) {
						num2 = lis-1;
					}
					ol.children[num2].className = 'now';
					//调用运动函数
					run(ul, -num * ul.children[0].offsetWidth, function() {
						flag = true;
					});
				}
			})
//点击指示图标定位图片
			for(var i=0; i<lis; i++){
				ol.children[i].index=i; //获取循环对象的下标号
				ol.children[i].addEventListener('click', function(){
					run(ul, -this.index*ul.children[0].offsetWidth);
					for(var j=0; j<lis; j++){
						ol.children[j].className='';
					};
					this.className='now';
					num=num2=this.index;
				})
			}
//设置定时器
			var timer=setInterval(function(){
				//调用向右运动事件
				spanR.click();
			},3000);
		</script>
	</body>
</html>

最终在浏览器中的效果为：