Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2016-05-16 16:32:20
original
2286 Les gens l'ont consulté

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.

É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