javascript实现循环广告条效果

2019-10-24 21:26:11

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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}

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

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：CSS样式里使用JavaScript

下一篇：微信小程序使用swiper组件实现图片轮播切换显示功能【附源码下载】