Tutoriel sur la façon d'obtenir l'effet de bannières publicitaires circulaires en utilisant javascript-js tutoriel-php.cn

Tutoriel sur la façon d'obtenir l'effet de bannières publicitaires circulaires en utilisant javascript

小云云

Libérer： 2017-12-13 09:38:25

original

1810 Les gens l'ont consulté

Cet article présente principalement l'effet de javascript pour réaliser des bannières publicitaires circulaires en détail. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

code 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>
<p class="centered">
<img src="images/reading1.gif" id="adBanner" alt="Ad Banner">
</p>
</body>
</html>

Copier après la connexion

code 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);
}

Copier après la connexion

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

Copier après la connexion

Ajouter un lien dans la barre d'annonce en boucle : modifier le code 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
}

Copier après la connexion

Recommandations associées :

Implémentation de bandes publicitaires flottantes HTML+CSS décomposition_HTML/Xhtml_production de pages web

implémentation js du code barre publicitaire flottant qui peut être fermé en haut des compétences website_javascript

Comment déplacer la barre publicitaire en plein écran en php

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!