JavaScript经典案例：图片定时轮播

冷不防 2022-12-24 01:51 133阅读 0赞

效果展示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTY1Mzkz_size_16_color_FFFFFF_t_70_pic_center]

CSS代码：

<style type="text/css">
    	#wrapper {
    		width: 500px;
    		height: 500px;
    		text-align: center;
    		margin: 50px auto;
    	}
    	
    	#start {
    		margin-right: 250px;
    	}
    </style>

HTML代码：

<div id="wrapper">
    	<img src="../imgCouple/1.jpg" id="img"><br><br>
    	<input type="button" value="开始轮播" id="start">
    	<input type="button" value="暂停轮播" id="pause">
    </div>

JavaScript代码：

<script type="text/javascript">
    	var imgList = ["../imgCouple/1.jpg", "../imgCouple/2.jpg", "../imgCouple/3.jpg", "../imgCouple/4.jpg", "../imgCouple/5.jpg"];
    	var img = document.getElementById("img"); // 图片标签
    	var start = document.getElementById("start"); // 开始轮播按钮
    	var pause = document.getElementById("pause"); // 暂停轮播按钮
    	var index = 0; // 图片下标
    	var timer; // 定时器标识
    	// 开启图片轮播
    	start.onclick = function() {
    		clearInterval(timer); // 开启新的定时器之前关闭已在当前元素上开启的定时器
    		timer = setInterval(function() {
    			index++;
    			index = index % imgList.length;
    			img.src = imgList[index];
    		}, 1000);
    	}
    	// 暂停图片轮播
    	pause.onclick = function() {
    		clearInterval(timer); // 关闭当前已开启的定时器
    	}
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTY1Mzkz_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/c3b15492a0f64153b102899f8881bb33.png

发表评论取消回复

表情：

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

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

相关阅读

相关 JavaScript经典案例：图片流动轮播

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

旧城等待，/ 2022年12月24日 11:00/ 0 赞/ 151 阅读

相关 JavaScript经典案例：图片定时轮播

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

冷不防/ 2022年12月24日 01:51/ 0 赞/ 134 阅读

相关 JavaScript实现图片轮播

//实现照片轮播 1.在没有按钮触发的情况下，四张图片搁几秒，就会实现自动轮播触发按钮单击事件，对应button的照片跳转到我们的窗体div界面

朴灿烈づ我的快乐病毒、/ 2022年08月21日 05:48/ 0 赞/ 249 阅读

相关 javaScript实现图片轮播

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

ゝ一纸荒年。/ 2022年08月10日 11:49/ 0 赞/ 232 阅读

相关 JavaScript实现图片轮播组件

效果：自动循环播放图片，下方有按钮可以切换到对应图片。添加一个动画来实现图片切换。鼠标停在图片上时，轮播停止，出现左右两个箭头，点击可以切换图片。

柔情只为你懂/ 2022年07月13日 12:37/ 0 赞/ 276 阅读

相关原生javascript图片轮播实现

初学javascript，尝试着制作动画-图片轮播。（实现方法挺多）思路：添加多张图片，依次让图片显示。依次显示需要每隔一段时间去更新，因此选择了setInterv

柔情只为你懂/ 2022年06月09日 22:59/ 0 赞/ 314 阅读

相关 jQuery实现图片定时轮播

参考出处：http://www.jb51.net/article/76153.htm <!DOCTYPE html> <html> <head>

骑猪看日落/ 2022年05月29日 07:47/ 0 赞/ 287 阅读

相关 JavaScript 实现图片轮播

今天给大家介绍下怎么用 JS 实现图片轮播效果。原理描述：使用JS实现轮播的原理是这样的：假设初始的情况，下图一个网格代表一个图，初始时，显示1 ： ![7

墨蓝/ 2022年05月17日 12:40/ 0 赞/ 275 阅读

相关 javascript图片轮播

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

深碍√TFBOYSˉ_/ 2022年05月12日 02:44/ 0 赞/ 330 阅读

相关 jquery经典实例之图片轮播

<!DOCTYPE html> <html lang="en"> <head> <meta charset="GBK">

太过爱你忘了你带给我的痛/ 2021年07月24日 18:31/ 0 赞/ 402 阅读