suchen

Heim  >  Artikel  >  Web-Frontend  >  Tutorial, wie Sie mit Javascript die Wirkung von kreisförmigen Werbebannern erzielen

Tutorial, wie Sie mit Javascript die Wirkung von kreisförmigen Werbebannern erzielen

小云云
小云云Original
2017-12-13 09:38:251769Durchsuche

Dieser Artikel stellt hauptsächlich die Wirkung von Javascript zur Erzielung kreisförmiger Werbebanner vor. Ich hoffe, dass er jedem helfen kann.

HTML-Code: 

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

CSS-Code: 

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-Code: 

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
}

Fügen Sie einen Link in der Loop-Anzeigenleiste hinzu: Ändern Sie den JS-Code

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
}


Verwandte Empfehlungen:

Html+CSS Floating Advertising Strip Implementation Decomposition_HTML/XHTML_Webseitenproduktion

js-Implementierung des schwebenden Anzeigenbarcodes, der oben auf der Website geschlossen werden kann_Javascript-Kenntnisse

So verschieben Sie die Anzeigenleiste in PHP in den Vollbildmodus

Das obige ist der detaillierte Inhalt vonTutorial, wie Sie mit Javascript die Wirkung von kreisförmigen Werbebannern erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erklärung der Ereignisschleife in JS und Node.jsNächster Artikel：Detaillierte Erklärung der Ereignisschleife in JS und Node.js

In Verbindung stehende Artikel

Mehr sehen