js用定时器实现简单轮播图

最新推荐文章于 2024-08-02 20:55:43 发布

LRight-T

最新推荐文章于 2024-08-02 20:55:43 发布

阅读量2.9k

点赞数 6

文章标签： js javascript

本文链接：https://blog.csdn.net/qq_44604924/article/details/108163674

版权

描述：用定时器实现简单轮播图，点击开始按钮，图片开始切换，点击停止按钮，图片停止切换。
js代码如下：

		<script type="text/javascript">
			window.onload = function(){
				var arr = ["../img/1.jpg","../img/2.jpg","../img/3.jpg","../img/4.jpg","../img/5.jpg"];
				var img = document.getElementById("img2");
				var index=0;
				img.src = arr[index];
				var timer;
				var button5 = document.getElementById("button5");
				
				button5.onclick = function(){
					clearInterval(timer);
					timer = setInterval(function(){//如果多次点击，切换就会很快
		//每点击一次，就会开启一个定时器，只能关闭最后一次，为解决该问题，在开启之前
		//要先关闭
					if(index == arr.length-1){
						index = 0;
					}
					img.src = arr[index++];
				},1000);
				};
			
				var button6 = document.getElementById("button6");
				button6.onclick = function(){
					clearInterval(timer);//该方法可以接受任意一个参数，可以是undefined
					//如果是有效的标识，则停止相应定时器，否则什么都不做
				};
			};
			
			
		</script>

html代码如下：`

<body>
		<div id="box17">
			<img src="../img/1.jpg" id="img2"/>
		</div>
		<div id="box18">
		<button id="button5">开始</button>
		<button id="button6">停止</button>	
		</div>
	</body>