js实现图片切换2

js实现图片切换2

前言

之前写了一个【JS 实现图片上下张切换】的实例。
这次是点击start，则自动开始切换，涉及了定时器的相关知识。
关于定时器的相关知识及应用，见此：js定时器应用实例

github

完整代码详见github链接

实现效果

ps：图片为我最爱的王安宇～。图片github自取

核心代码

<script type="text/javascript">
 		window.onload = function(){
 			var start = document.getElementById('start');
 			var pause = document.getElementById('pause');
 			
 			// 获取img标签
			var img = document.getElementsByTagName('img')[0];

			// 创建一个数组，用来保存图片的路径
			var imgArr = ['img/1.png','img/2.png','img/3.png','img/4.png','img/5.png'];


			// 创建一个变量，保存当前正在显示的图片索引
			var index =0;
			// 用于绑定定时器的标志
			var timer;

 			start.onclick = function(){
 				// 在开启定时器之前，需要将上一个定时器关闭
				clearInterval(timer);

				timer = setInterval(function(){
					// 切换图片
					index++;
					if(index>=imgArr.length){
						index=0;
					}
					img.src = imgArr[index];
				},1000);

 			};

 			// 当鼠标点击pause，图片则暂停切换
 			pause.onclick = function(){
 				clearInterval(timer);
 			};

 			// 当鼠标移入到某张图片上，则这张图片就停止切换
 			img.onmouseover = function(){
 				clearInterval(timer);
 			};
 		};
	</script>