Maison > interface Web > js tutoriel > Comment implémenter des bannières publicitaires circulaires en javascript

Comment implémenter des bannières publicitaires circulaires en javascript

亚连
Libérer: 2018-06-21 11:54:53
original
1608 Les gens l'ont consulté

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

L'exemple de cet article est de partager avec tout le monde l'effet de. javascript pour mettre en œuvre la publicité circulaire. Le code spécifique de l'article est pour votre référence. Le contenu spécifique est le suivant

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 bannière publicitaire circulaire : 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

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que ce sera le cas. être utile à tout le monde à l’avenir.

Articles connexes :

Comment utiliser la position de la barre de défilement pour juger

Comment définir dynamiquement le texte d'invite d'un espace réservé à l'aide de l'applet WeChat

À propos des compétences d'utilisation d'ES6/JavaScript (tutoriel détaillé)

Comment explorer les images de sites Web dans nodejs

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal