Maison  >  Article  >  interface Web  >  méthode js pour changer aléatoirement les images d'arrière-plan sur les pages Web_compétences javascript

méthode js pour changer aléatoirement les images d'arrière-plan sur les pages Web_compétences javascript

WBOY
WBOYoriginal
2016-05-16 16:32:202260parcourir

L'exemple de cet article décrit comment implémenter la commutation aléatoire des images d'arrière-plan sur les pages Web à l'aide de js. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

Tout d'abord, préparez quelques images. La taille de l'image (qu'il s'agisse de la taille ou de la taille des données) doit être bien contrôlée. Si elle est trop grande, l'utilisateur ne pourra pas attendre de voir l'image entière et. sauter. S'il est trop petit, cela affectera la qualité de la page

.

Organisez ces images dans un tableau dans un script pour faciliter les appels. La longueur du tableau correspond bien entendu au nombre d’images.

Copier le code Le code est le suivant :
var bodyBgs = [] //Créer une variable de tableau pour stocker le chemin de l'image d'arrière-plan
bodyBgs[0] = "images/01.jpg";
bodyBgs[1] = "images/02.jpg";
bodyBgs[2] = "images/03.jpg";
bodyBgs[3] = "images/04.jpg";
bodyBgs[4] = "images/05.jpg";

Étant donné que 5 images ont été utilisées ci-dessus, un nombre aléatoire de 0 à 4 doit être généré ici. Si les longueurs des tableaux sont différentes, modifiez simplement le multiplicateur dans le code ci-dessous.

Copier le code Le code est le suivant :
var randomBgIndex = Math.round( Math.random() *4 ) ;

Ce sont les programmes de base. Bien que ce soit très simple, c'est une petite idée. Si l'on se base sur cela, certaines fonctions étendues peuvent être créées via le traitement. Par exemple : changement de thème et autres présentations aléatoires, etc. Vous trouverez ci-dessous le code JS complet.

Copier le code Le code est le suivant :

J'espère que cet article sera utile à la programmation Web de chacun basée sur JavaScript.

Déclaration:
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