javascript实现循环广告条效果

时间：2021-05-26

本文实例为大家分享了javascript实现循环广告条的具体代码，供大家参考，具体内容如下

html代码:

<!DOCTYPE html><html><head><title>Rotating Banner</title><script src="script07.js"></script><link rel="stylesheet" href="script01.css" rel="external nofollow" ></head><body><div class="centered"><img src="images/reading1.gif" id="adBanner" alt="Ad Banner"></div></body></html>

css代码：

body {background-color: white;color: black;font-size: 20px;font-family: "Lucida Grande", Verdana,Arial, Helvetica, sans-serif;}h1, th {font-family: Georgia, "Times New Roman",Times, serif;}h1 {font-size: 28px;}table {border-collapse: collapse;}th, td {padding: 10px;border: 2px #666 solid;text-align: center;width: 20%;}#free, .pickedBG {background-color: #f66;}.winningBG {background-image:url(images/redFlash.gif);}

js代码：

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);//设置时间,本每隔多长时间改变广告条中的GIF}

在循环广告条中添加链接：修改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("negrino.com","sun.com","microsoft.com");document.location.href = "http://www." + adURL[thisAd];return false;}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);//设置时间,本每隔多长时间改变广告条中的GIF}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章