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

喜欢ヅ旅行 2022-11-29 14:29 212阅读 0赞

描述：用定时器实现简单轮播图，点击开始按钮，图片开始切换，点击停止按钮，图片停止切换。  
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>

发表评论取消回复

表情：

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

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

相关阅读

相关 JS实现简单的轮播图

S实现简单的轮播图 js用面向过程的方法实现简单的轮播图先写好简单的html布局；正常轮播图所要实现的功能有一下几个： 1.banner图的自动切换；...

逃离我推掉我的手/ 2024年04月18日 08:27/ 0 赞/ 95 阅读

相关简单css+js实现轮播图

轮播图由于js+css+html简单实现; 效果为16个cube 点击下一轮![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpd...

你的名字/ 2024年04月18日 07:08/ 0 赞/ 92 阅读

相关 JS实现简单的轮播图

1. 用display属性的block或none控制轮播图代码如下： <!DOCTYPE HTML> <head> <met

ゝ一纸荒年。/ 2023年07月06日 06:24/ 0 赞/ 130 阅读

相关 js定时器实现轮播图

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

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

相关 html + js 简单实现轮播图

实现思路如下：设置所有图片的 display 属性为 none 设置一个 index 用来标志获取到的图片设置一个定时器，每隔一段时间令 index 自增并将对应

旧城等待，/ 2022年12月19日 13:16/ 0 赞/ 236 阅读

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

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

喜欢ヅ旅行/ 2022年11月29日 14:29/ 0 赞/ 213 阅读

相关 js无缝轮播图(手动轮播+自动轮播+定时器+过渡动画)

为了方便大家使用，我把Html，CSS，以及js 和用到图片都放在下面了。\\ > 特此说明：这个无缝轮播的代码是可以直接复制粘贴使用，嘻嘻！ 1.先新建一个文件，随意命名

喜欢ヅ旅行/ 2022年11月25日 10:20/ 0 赞/ 474 阅读

相关 html原生js实现图片轮播,原生js实现简单轮播图

本文实例为大家分享了js实现简单轮播图的具体代码，供大家参考，具体内容如下一、写入网页基本结构 body: 网页的最外部设置一个id为wrap的容器，取代body，这样

冷不防/ 2022年10月06日 07:52/ 0 赞/ 312 阅读

相关 js实现简单的轮播图

html+css代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="

刺骨的言语ヽ痛彻心扉/ 2022年04月17日 03:54/ 0 赞/ 286 阅读

相关 js实现轮播图（简单滚动轮播)

原理：在页面上有一个可视区域（a），用来显示图片，还有一个放所有需要轮播的图片的区域(b) ，当执行操作时，b需要移动，移动一个a的宽度，使下一张图片显示，

冷不防/ 2021年11月10日 09:30/ 0 赞/ 707 阅读