JavaScript实现简单的广告滚动条

HTML：

<!DOCTYPE html>
<html>
<head>
	<title>Rotating Banner</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="RollOver.css">
	<script type="text/javascript" src="RollOver.js"></script>
</head>
<body>
	<div class="centered">
		<a href="bingo.html"><img src="images/color1.jpg" id="adBanner" alt="adBanner"></a>
	</div>
</body>
</html>
CSS：


body {
	background-color: #FFF;
}

img {
	border-width: 0;
}

.centered {
	text-align: center;
}

#adBanner {
	width: 720px;
	height: 450px;
}

JS：

window.onload = initBannerLink;

var thisAd = 0;

function initBannerLink() {
	if(document.getElementById("adBanner").parentNode.tagName == "A") {
		document.getElementById("adBanner").parentNode.onclick = newLocation;

	}
	rotate();
}

function newLocation() {
	var adURL = new Array("zhihu.com", "douban.com", "baidu.com", "google.com");
	document.location.href = "http://www." + adURL[thisAd];
	return false;
}

function rotate() {
	var adImage = new Array("images/color2.jpg", "images/color3.jpg", "images/color4.jpg", "images/color5.jpg");

	thisAd++;
	if(thisAd == adImage.length) {
		thisAd = 0;
	}
	document.getElementById("adBanner").src = adImage[thisAd];
	setTimeout(rotate, 3*1000);
}


版权声明：本文为Fyn_Andersen原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。