Maison > Article > interface Web > Comment implémenter des bannières publicitaires circulaires en javascript
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>
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); }.
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 }
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 }
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!