淘宝的图片定时播放你会吗?还不来看看?

这个实现起来比较简单,就是其中一些地方需要注意一下

  • 点击开始按钮时会开启多个定时器,造成图片播放速度较快,暂停按钮无法使用,因此需要关闭该元素得定时器,这样最后只会留下一个定时器
  • //关闭该元素得其他定时器 clearInterval(timer);
  • 其次主要存储图片得数组的长度,不要让索引越界无效
    采用两种解决方法
/*使图片循环播放
* if(index>=imgArr.length){
    index = 0;
 }	
*/
//或者使用下面代码也能实现相同效果
index = index % imgArr.length;

这样其他的就比较简单了,主要就是对定时器的运用
源代码如下:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#img {
				width: 300px;
				height: 300px;
			}
		</style>

		<script type="text/javascript">
			window.onload = function() {
				//获取img标签
				var img = document.getElementById("img");
				//创建一个保存图片的数组
				var imgArr = ["img/01.jpg", "img/02.jpg", "img/03.jpg", "img/04.jpg", "img/05.jpg"];
				//创建索引
				var index = 0;
				var timer;
				//获取btn01
				var btn01 = document.getElementById("btn01");

				//为btn01绑定一个单击响应函数
				btn01.onclick = function() {
					/*
					 * 当点击开始按钮时,图片开始轮播
					 */
					//关闭该元素得其他定时器
					clearInterval(timer);
					timer = setInterval(function() {

						img.src = imgArr[index];
						index++;

						/*使图片循环播放
						 * if(index>=imgArr.length){
							index = 0;
						}	
						*/
						//或者使用下面代码也能实现相同效果
						index = index % imgArr.length;

					}, 1000)
				};

				//获取btn02
				var btn02 = document.getElementById("btn02");
				//为btn02绑定一个单击响应函数
				btn02.onclick = function() {
					clearInterval(timer);
				};

			};
		</script>
	</head>

	<body>
		<img id="img" src="img/01.jpg" />

		<br /><br />
		<button id="btn01">开始</button>
		<button id="btn02">暂停</button>
	</body>

</html>
相关推荐
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页