Dieser Artikel stellt hauptsächlich die Wirkung von Javascript zur Implementierung kreisförmiger Werbebanner vor. Er hat einen gewissen Referenzwert.
Das Beispiel dieses Artikels dient dazu, die Wirkung mit allen zu teilen Javascript zur Implementierung von zirkulärer Werbung. Der spezifische Inhalt lautet wie folgt:
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>
js-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);
}in der Schleife Fügen Sie einen Link zum Werbebanner hinzu: Ändern Sie den 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
}Das Obige habe ich für alle zusammengestellt. Ich hoffe, es wird für alle hilfreich sein die Zukunft.
Verwandte Artikel:
So verwenden Sie die Position der Bildlaufleiste zur BeurteilungSo legen Sie Platzhalter-Eingabeaufforderungstext mithilfe des WeChat-Applets dynamisch festInformationen zur Verwendung von ES6/JavaScript (ausführliches Tutorial)So crawlen Sie Website-Bilder in NodeJSDas obige ist der detaillierte Inhalt vonSo implementieren Sie kreisförmige Werbebanner in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
