JavaScript实现简单的广告滚动条

最新推荐文章于 2021-07-07 14:21:55 发布

达芬奇怪物体

最新推荐文章于 2021-07-07 14:21:55 发布

阅读量912

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Fyn_Andersen/article/details/78445585

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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);
}

达芬奇怪物体

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现简单的广告滚动条

HTML： Rotating Banner CSS：body { background-color: #FFF;}img { border-width: 0;}.centered { text-align: center;}#adBanner { width: 720px; height: 450px;}JS：
复制链接

扫一扫

专栏目录