sur un calendrier prévu, de sorte que seule une image est affichée à la fois. Le JavaScript de rotation est souvent accompagné par des effets d'animation de fondu ou de glisser des images ou du texte dans et hors de la balise
. La bibliothèque jQuery fournit un moyen facile de sélectionner des images et de mettre en œuvre une animation de rotation.
La page d'accueil pour de nombreux sites web d'aujourd'hui contient une série d'images pour faire pivoter ou glisser dans et hors de la page. Cette fonctionnalité est implémentée par la création d'une unique balise
avec plusieurs images et en utilisant le JavaScript 'setInterval' méthode pour faire pivoter la balise
sur un calendrier prévu, de sorte que seule une image est affichée à la fois. Le JavaScript de rotation est souvent accompagné par des effets d'animation de fondu ou de glisser des images ou du texte dans et hors de la balise
. La bibliothèque jQuery fournit un moyen facile de sélectionner des images et de mettre en œuvre une animation de rotation.
- Créer un nouveau document HTML à l'aide du bloc-notes ou un éditeur HTML. Insérer des en-têtes HTML dans le document:
Rotation Div - Créer un style CSS pour la balise
pour être tourné. Définir la position, la largeur, la hauteur et la couleur d'arrière-plan pour la balise
. Désactiver l'affichage des images dans la balise
et activer l'affichage de l'image avec le nom de la classe 'active':
- Insérer la bibliothèque jQuery dans le document, y compris à partir d'une source publique, tels que Google Api:
https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'>> - Ajouter le code JavaScript pour faire pivoter les images dans la balise
. Trouver l'image avec la fonction 'active' de la classe et de sélectionner l'image suivante dans la liste. Si la taille de l'image suivante est égale à zéro, commencer à revenir au début de la liste avec la première image:
la fonction rotate() {
var active = $('#pivoter .active')
if ($('#pivoter .active').next().longueur >0)
var next = $('#pivoter .active').next()
else
var next = $('#tourner img:tout d'abord')
- Fondu de l'image avec la fonction 'active' de la classe et de fondu de l'image suivante. Supprimer les 'actifs' de la classe à partir de l'image courante et de l'attribuer à l'image suivante:
active.fadeOut('fast', function() {
active.removeClass('active')
suivant.fadeIn('slow').addClass('active')
})
} - Régler une minuterie pour faire tourner les images de toutes les cinq secondes à l'aide de la 'setInterval' la méthode:
$(document).ready(function() {
setInterval('rotate()', 5000)
})
- Insérer la balise
dans le corps du document, et d'attribuer le 'active' de la classe à la première image:

http://l.yimg.com/g/images/soup-discover.jpg' width='979' height='349' alt='Image1' class='active'>

http://l.yimg.com/g/images/soup_hero_124.jpg.v1' width='979' height='349' alt='Image2'>

http://l.yimg.com/g/images/soup_hero_jessica.jpg.v1' width='979' height='349' alt='Image3'>

http://l.yimg.com/g/images/soup_hero_alejokirchuk.jpg.v1' width='979' height='349' alt='Image4'>
d'Autres Personnes Sont la Lecture
Comment Charger SVG à DIV>
Comment Animer un DIV D'Affichage None pour Bloquer en jQuery
- Enregistrez le document. L'ouvrir dans un navigateur et de regarder les images dans la balise
rotation sur l'écran par en fondu toutes les cinq secondes.
Comment faire Pivoter une Div en JavaScript