JavaScript-小案例-banner图片变换导航

最新推荐文章于 2024-07-23 11:32:13 发布

～本特利～

最新推荐文章于 2024-07-23 11:32:13 发布

阅读量181

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/m0_49095721/article/details/110946576

版权

~本特利~

效果如下：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>banner图片变换导航</title>
</head>

<body>

	<script language="JavaScript" type="text/JavaScript">
		<!--------------------------------------------------------------->
		<!--				功能说明：banner变换导航 		 		   -->
		<!--------------------------------------------------------------->
		var urlArray = new Array(4); 
		var banArray = new Array(4); 
		var counter = 1;
		var url = "http://www.baidu.com"; 
		urlArray[0] = "http://www.baidu.com";
		urlArray[1] = "http://www.baidu.com";
		urlArray[2] = "http://www.baidu.com";
		urlArray[3] = "http://www.baidu.com";
		if(document.images) {
			for(i = 1; i < 4; i++){
				banArray[i] = new Image(468, 60);
				banArray[i].src = "images/banner"+ i + ".jpg";
			}
		}
		function changeBanner(){
			if(counter > 3)
				counter = 1;
			document.banner.src = banArray[counter].src; 
			url = urlArray[counter]; 
			counter++; 
		}
		var timer = window.setInterval("changeBanner()", 2000);
		<!--------------------------------------------------------------->
	</script>

	<a href="#" onClick="window.open(url,'BannerWin');"><img src="images/banner4.jpg" width= 650 height=250 border=0 name="banner"></a>


</body>
</html>

在这里插入图片描述

看完点个赞呗，速评一下更有动力哦

～本特利～

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript-小案例-banner图片变换导航

~本特利~<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>banner变换导航</title></head><body> <script language="JavaScript" type="text/JavaScript"> <!------------------------
复制链接

扫一扫