使用JavaScript实现图片轮播效果-优快云博客

本文链接：https://blog.youkuaiyun.com/dumzp13/article/details/51068513

本文介绍如何利用JavaScript实现图片轮播功能。当鼠标悬停在图片上时，轮播会暂停，移开鼠标后继续自动播放。通过HTML结构和JavaScript逻辑，实现了六张图片的循环播放效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：将六张图片循环播放。当鼠标移到图片上方，图片暂停。

代码：

HTML：

<!DOCTYPE html>
<html>
	<head>
		<style>
			#pics {
				height: 218px;
				width: 218px;
				border: 3px solid #ddd;
			}
			.hide {
				display: none;
			}
			.show {
				display: inline-block;
			}
		</style>
		<meta charset="utf-8"/>
		<title>图片轮播</title>
	</head>
	<body>
		<div id="pics" onmouseover="stop()" onmouseout="change()">
			<img src="images/01.jpg" class="show"/>			<!--先将图片全部隐藏。-->                                
			<img src="images/02.jpg" class="hide"/>
			<img src="images/03.jpg" class="hide"/>
			<img src="images/04.jpg" class="hide"/>
			<img src="images/05.jpg" class="hide"/>
			<img src="images/06.jpg" class="hide"/>
		</div>
	</body>
	<script type="text/javascript" src="change.js" ></script>
</html>

change.js

var id;
var imgs = document.getElementsByTagName("img");
var index = 0;
function change(){							//轮播图片
	id = setInterval(function(){			//用定时器实现两秒钟换一张
		index++;
		for(var i=0;i<imgs.length;i++){
			imgs[i].className = "hide";
		}
		var next = index%imgs.length;		//当前脚标模除以图片张数为下一张图片的脚标
		imgs[next].className = "show";		//将将要显示的图片的class更换为show
	},2000);
}

function stop(){							//鼠标移出时的stop方法
	clearInterval(id);
}
change();

用JS实现图片轮播