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

迈不过友情╰ 2022-04-18 06:27 173阅读 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>

发表评论取消回复

表情：

评论列表（有 0 条评论，173人围观）

还没有评论，来说两句吧...

相关阅读

相关利用jQuery实现图片无限循环轮播(不借助于轮播插件)

原来我主要是用Bootstrap框架或者swiper插件实现轮播图的功能，而这次是用jQuery来实现图片无限循环轮播！用到的技术有：html、css、JavaScript

阳光穿透心脏的1/2处/ 2023年06月02日 14:00/ 0 赞/ 33 阅读

相关 js定时器实现轮播图

js定时器实现轮播图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

深藏阁楼爱情的钟/ 2022年12月25日 11:59/ 0 赞/ 177 阅读

相关 html实现自动图片轮播,图片轮播的实现（html__js）

1.简单实现 1)实现思想：通过轮播次数来决定显示那一张首先，可以用简单的div 包含img的框架来实现，我们为他添加按钮，每个按钮对应不同的图片，那么，每点击一次，将要显示

待我称王封你为后i/ 2022年10月06日 00:48/ 0 赞/ 301 阅读

相关利用vueJs实现图片轮播

最近新学习了vuejs,尝试着用vuejs写了一个简单的图片轮播，便做个简单的记录以下只贴出carousel.vue代码，其他的省略 <template>

小咪咪/ 2022年06月15日 12:09/ 0 赞/ 277 阅读

相关 js定时器实现图片的无缝轮播

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>无缝滚动轮播图</title>

梦里梦外;/ 2022年06月02日 02:38/ 0 赞/ 275 阅读

相关 JS之实现简单的图片轮播

> 复制即可使用 1：代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"

Myth丶恋晨/ 2022年05月13日 13:56/ 0 赞/ 203 阅读

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

挺简单的我就不多扯 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

迈不过友情╰/ 2022年04月18日 06:27/ 0 赞/ 174 阅读

相关图片利用swiper插件实现轮播效果

一般当要使图片自适应屏幕大小变换时候，我们都要给每一个图片设置100%宽高。在图片的父级的div里写上固定的宽高，防止溢出。那么轮播是写在哪一部分呢？答案就是在父级div里

我就是我/ 2021年11月22日 07:26/ 0 赞/ 522 阅读

相关利用js实现图片的轮播效果

每个三秒钟做一件事: window.setInterval()：按照指定周期（以毫秒计）来调用函数或计算表达式 setInterval("alert('123')",20...

红太狼/ 2020年06月06日 17:01/ 0 赞/ 797 阅读

相关利用js实现图片的轮播效果

利用js实现图片的轮播效果

朱雀/ 2020年05月10日 16:46/ 0 赞/ 1109 阅读