Comment faire pivoter une division en JavaScript

unique avec plusieurs images et en utilisant la méthode du " setInterval " JavaScript pour faire tourner la

sur un horaire prédéterminé de sorte qu'une seule image est affichée à la fois. La rotation JavaScript est souvent accompagné par des effets d'animation qui se fanent ou glisser des images ou du texte dans et hors de la

. La bibliothèque jQuery fournit un moyen facile de sélectionner des images et mettre en œuvre une rotation animée . Instructions
1

Créer un nouveau document HTML en utilisant le Bloc-notes ou un éditeur HTML. Insérez les en-têtes HTML dans le document: Photos

< p>

Rotation Div
2

Créer un style CSS pour la

à être entraîné en rotation . Réglez la position, la largeur , la hauteur et la couleur de fond pour le

. Désactiver l'affichage des images dans la

et activer l'affichage de l'image avec le nom de classe "active" :

< br > 3

Insérez la bibliothèque jQuery dans le document en l'incluant à partir d'une source publique , tels que les API Google :

< script de src = " https://ajax.googleapis.com/ajax/libs /jquery/1.6.1/jquery.min.js ">
4

Ajoutez le code JavaScript pour faire pivoter les images dans le

. Trouvez l'image avec la classe "active" et sélectionnez l'image suivante dans la liste. Si la taille de l'image suivante est zéro, commencer à revenir au début de la liste avec la première image : fonction

rotate ( ) { var

actif = $ ("# tourner active. ");

if ($ (". . . # tourner active " ) . . next () longueur > 0)

var next = $ (" # tourner active " ) prochaine ();

autre

var next = $ ("# tourner img : d'abord ");
5

Fade l'image avec la classe "active" sur et à la décoloration de l'image suivante po Retirez la classe "active" à partir de l'image courante et l'attribuer à l'image suivante :

active.fadeOut ( "rapide" , function ()
6

définir une minuterie pour faire pivoter les images toutes les cinq secondes en utilisant la méthode du " setInterval ": .

$ (document ) prêt ( function () {

setInterval ( " rotate () " , 5000 ) ;

});

Photos

Insérer le

dans le corps du document et attribuer la classe "active" à la première image :

349 Photos

;

Photos

enregistrer le document. Ouvrez-le dans un navigateur et de regarder les images dans le

tournent sur l'écran par un fondu toutes les cinq secondes .