|
La capacité de JavaScript pour accéder au DOM (Document Object Model) d'une page Web donne aux développeurs Web les moyens de changer dynamiquement les attributs d'un (Hypertext Markup Language) élément HTML. La méthode getElementById JavaScript () permet au programmeur modifier la largeur d' une étiquette ![]() , la taille, les frontières et même le "src ", ou bien la source de l'image. Les images peuvent changer de façon aléatoire ou séquentielle. La balise ![]() doit être étiqueté avec une pièce d'identité avant le getElementById () peut accéder. Timing Banner Image Change le setInterval de
JavaScript () fonction déclenche des événements après un certain laps de temps s'est écoulé , et il continuera à déclencher l' événement, sauf si elle est arrêtée par la méthode clearInterval (). SetInterval () prend deux paramètres : la fonction que vous voulez exécuter et la quantité de temps à attendre avant de l'exécuter . Vous pouvez avoir setInterval () appelle un script qui tourne la source de l'image de la bannière toutes les quelques secondes ou au hasard. L'extrait de programme ci-dessous appelle une fonction qui change la bannière toutes les cinq secondes
Accès à l' étiquette de l'image par le DOM
la fonction JavaScript appelle « getElementById ( )" et " getElementsByName ()" peut accéder et de manipuler la page Web DOM . " GetElementById ()" peut obtenir à des éléments HTML directement . D'autre part , " getElementsByName ()" enregistre tous les éléments même nom dans la page Web dans un tableau. Pour changer un ![]() spécifique par exemple, il devrait être donnée une classe unique ou un nom d'identification . Comme chaque bannière peut être représenté par sa propre identité, le " getElementById (): la méthode simple d'utiliser la déclaration suivante accéder à une balise ![]() avec l'ID . " Ad "et changez sa source d'image " banner2 . . jpg "
document.getElementById (" ad " ) banner2.jpg " src = ". ;
aléatoire Banner Image Rotation
< p> Vos bannières peut être programmé pour changer de manière aléatoire plutôt que séquentiellement . L' fonction Math.random ( ) JavaScript génère un nombre aléatoire entre 0 et 1. Multiplier ce nombre par 3 produit un nombre aléatoire compris entre 0 et 3. The Math . fonction FLOOR () arrondit le nombre à l'entier inférieur . Enfin, l'ajout d'un 1 au résultat limite l'ensemble des nombres à 1, 2 ou 3. la fonction suivante hasard substituts l'un des trois images stockées dans un tableau qui s'appelle annonces .
fonction changead () {
NextBannerImage = 1 + Math.floor ( Math.random ( ) * 3 ) ;
document.getElementById (" ad " ) . src = annonces [ NextBannerImage ] ; .
}
séquentielle Banner Image Rotation
Vos bannières peuvent également être programmés pour changer séquentiellement Si vous avez un tableau de trois images de bannière , vous pouvez créer un script pour afficher la première , deuxième et troisième élément dans le tableau , puis lancez le nombre entier. Chaque fois que le changead () la fonction ci-dessous est appelé, un 1 est ajoutée au compteur " NextBannerImage »et l'image suivante dans la matrice est faite la source de tags ![]() . une fois que le compteur atteint 3 , le compteur sera remis à 0. Utilisez la fonction setInterval () pour appeler cette après un intervalle de temps défini .
var NextBannerImage = 0; //variable globale accessible à la fonction
fonction changeAdBanner () {
NextBannerImage + +;
document.getElementById . ( "ad " ) src = annonces [ NextBannerImage ] ;
if ( NextBannerImage == 3) pour {
NextBannerImage = 0;
} Photos }
|
