javascrip之利用定时器实现图片的轮播

最新推荐文章于 2023-05-18 20:23:20 发布

make sense

最新推荐文章于 2023-05-18 20:23:20 发布

阅读量471

点赞数 1

分类专栏： js小实例

本文链接：https://blog.csdn.net/baidu_41861751/article/details/83900277

版权

js小实例专栏收录该内容

7 篇文章 0 订阅

订阅专栏

挺简单的我就不多扯

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>利用定时器 图片的轮播</title>
		<style>
		
			img{
				margin: 0px auto;
				width: 500px;
				height: 300px;
			}
			
		</style>
		
		<script>
			window.onload = function(){
			   var img01 = document.getElementById("img01");
			   var btn01 = document.getElementById("btn01");
			   var btn02 = document.getElementById("btn02");
			   
			   var Arrimg = ["img/img01.jpg","img/img02.jpg","img/img03.jpg","img/img04.jpg","img/img05.jpg"];
			   var index=0;
			   var temp; //定时器的标识符
			   btn01.onclick = function(){
			   	    //避免重复按按钮，导致开启多个定时器， 所以在开定时器之前 我们要把之前的定时器关掉
			   	    clearInterval(temp);
			   	    
				  	temp= setInterval(function(){
				  	  index++;
				  	  if(index>=Arrimg.length){
				  	  	 index=0;
				  	  }
				  	  img01.src = Arrimg[index];
				  },1000);
				  	
			  }
			   btn02.onclick = function(){
			   	  clearInterval(temp); //消除定时器
			   }
			  	
			}
		</script>
			
	</head>
	<body>
	
		    <img src="img/img01.jpg" id="img01" />
		    <br /><br />
		    <button id="btn01">开始</button>
		    <button id="btn02">停止</button>

	    
	</body>
</html>

make sense

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
javascrip之利用定时器实现图片的轮播

挺简单的我就不多扯&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;利用定时器图片的轮播&lt;/title&gt; &lt;style&gt; img{ margin: 0px auto; wid
复制链接

扫一扫

专栏目录