javascript---处理图片翻转器

关注

原创最新推荐文章于 2026-09-20 14:39:02 发布 1k 阅读 AI 写同款· GEO 优化 ›

图片轮播效果：Js实现图片上下翻转动画函数的基本语法为：该函数接受一个函数func和一个时间间隔delay（以毫秒为单位）。func将被定期执行，每过delay毫秒执行一次。在图片轮播的场景中，我们可以这样使用// 图片切换的逻辑// ...}, 3000);// 每3秒切换一次图片函数可以停止设置的定时器。其语法为：其中intervalId是函数返回的ID。当你需要停止图片轮播时，可以调用并传入相应的ID。阅读详情

鼠标移动到不同图像上，在同一处显示相关的信息

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multiple Link , single rollover</title>
<style type="text/css">
body {
	background-color: #ec9;
}
img {
	border-width: 0;
}
#captionDiv {
	float: right; /*定义元素在哪个方向浮动  */
	width: 210px;
	margin: auto 50px; /* 外边距 */
}
#captionField {
	margin: 20px auto;
	width: 208px;
	height: 27px;
}
#inventionDiv {
	width: 375px;
	margin-left: 20px;
}
#heading {
	margin-bottom: 20px;
	width: 375px;
	height: 26px;
}
</style>
<script type="text/javascript">
	/*	注意rolloverInit是绑定，所以不需要加()  */
	window.onload = rolloverInit;
	
	function rolloverInit() {
		for(i=0;i<document.links.length;i++) {
			var linkObj = document.links[i];
			if(linkObj.className) {
				var imgObj = document.getElementById(linkObj.className);
				if(imgObj) {
					setupRollover(linkObj , imgObj);
				}
			}
		}	
	}
	
	function setupRollover(thisLink ,  textImage) {
		thisLink.changeImage = textImage;
		
		thisLink.outImage = new Image();
		thisLink.outImage.src = textImage.src;
		thisLink.overImage = new Image();
		thisLink.overImage.src = "images/" + thisLink.id + "Text.gif";
		
		thisLink.onmouseout = function() {
			thisLink.changeImage.src = thisLink.outImage.src;
		}
		thisLink.onmouseover = function() {
			thisLink.changeImage.src = thisLink.overImage.src;
		}
	}
</script>
</head>
<body>
	<div id="captionDiv">
		<img src="images/DaVinci.jpg" width="144" height="219" alt="DaVinci"/><BR/>
		<img src="images/bg.gif" id="captionField" alt="Text Field"/>
	</div>
	<div id="inventionDiv">
		<img src="images/leoText.gif" id="heading" alt="Leonardo's Inbentions"/><BR/>
		<a href="flyPage.html" class="captionField" id="flyer">
			<img src="images/flyer.gif" width="293" height="165" alt="Flying Machine" id="flyerImg"/>
		</a><BR/>		
		<a href="tankPage.html" class="captionField" id="tank">
			<img src="images/tank.gif" width="325" height="92" alt="Tank" id="tankImg"/>
		</a><BR/>		
		<a href="heliPage.html" class="captionField" id="helicopter">
			<img src="images/helicopter.gif"  width="224" height="160" alt="Helicopter" id="helicopterImg"/>
		</a>
	</div>
</body>
</html>

收录于