javascript学习(5):创建循环的广告条


可以利用javascript创建循环的广告条

在Web 上冲浪时,常常会见到定期在图像之间切换的广告条。其中一部分是动画GIF 文件,这
种GIF 文件包含许多帧连续播放的图像,其他的是Flash 动画。如果希望页面循环显示许多GIF(无
论是否是动画),那么可以使用JavaScript 来实现,这个示例使用3 个GIF 并重复地循环显示它们。



这个HTML 页面在循环的广告条中加载第一个图像,其他工作由JavaScript 处理
<!DOCTYPE html>
<html>
<head>
<title>Rotating Banner</title>
<script src="script07.js"></script>
<link rel="stylesheet" href="script01.css">
</head>
<body>
<div class="centered">
<img src="images/reading1.gif" id="adBanner" alt="Ad Banner">
</div>
</body>
</html>


可以使用JavaScript 在广告条中循环显示图像

window.onload = rotate;
var thisAd = 0;
function rotate() {
var adImages = new Array("images/ reading1.gif","images/reading2. gif","images/reading3.gif");
thisAd++;
if (thisAd == adImages.length) {
thisAd = 0;
}
document.getElementById("adBanner").src = adImages[thisAd];
setTimeout(rotate, 3 * 1000);
}


个脚本演示如何将循环广告条转换为 真正可单击的广告条

<!DOCTYPE html>
<html>
<head>
<title>Rotating Banner with Links </title>
<script src="script08.js"></script>
<link rel="stylesheet" href="script01.css">
</head>
<body>
<div class="centered">
<a href="linkPage.html"><img src= "images/banner1.gif" id="adBanner" alt="ad banner"></a>
</div>
</body>
</html>

脚本
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("negrino.com","sun.com","microsoft.com");
document.location.href = "http://www." + adURL[thisAd];
return false;//--------------------------------------------
}
function rotate() {
var adImages = new Array("images/ banner1.gif","images/banner2.gif","images/banner3.gif");
thisAd++;
if (thisAd == adImages.length) {
thisAd = 0;
}
document.getElementById("adBanner").src = adImages[thisAd];
setTimeout(rotate, 3 * 1000);
}

。最后,它返回false,告诉浏览器不应再加载这个href。如果不这样做,浏览器就
会加载这个URL 两次。我们已经在JavaScript 中处理了所有工作,所以不需要再加载href。








你可能感兴趣的:(JavaScript,脚本)