Bienvenue sur le blog d'un développeur web : Actualités du monde informatique et scientifique, morceaux de programmations et diverses informations intéréssantes.

Faire une animation en boucle avec jQuery et setInterval()

Posté par : Neg le : 2009-04-28 21:34:34



Après avoir vu il y'a quelque temps comment faire un slider horizontal avec jquery reprenons le même principe pour en faire une animation en boucle dont la démo est ici

le corps de notre page est très simple :

<body>
<div id="conteneur">
<div id="slidebox">
<img src="slideimages/animauto1.jpg"/>
<img src="slideimages/animauto2.jpg"/>
<img src="slideimages/animauto3.jpg"/>
</div>
</div>
</body>


le css pour mettre en page tout ça (dans le head de la page) :

<style type="text/css">
/*fond de la page noir*/
body
{
background:#000000;
}
/*conteneur de la taille des images, centré dans la page avec un overflow hidden pour cacher les images qui dépasse et en position relative pour effectivement cacher les image sous IE*/
#conteneur
{
border:1px solid #ff3300;
margin-left:auto;
margin-right:auto;
height: 400px;
width: 400px;
overflow:hidden;
position:relative;
margin-top:100px;
}
/*slidebox en position relative pour que le slide fonctionne avec une taille trés large pour que les images placées dedans restent alignées horizontalements*/
#slidebox
{
position:relative;
width:5000px;
}
</style>


Il nous manque maintenant que le javascript à appelé aussi dans le header de la page et après avoir inclus la librairie jQuery :


<script type='text/javascript'>
//vitesse de l'annimation
var vitesseSlide='slow';
//largeur d'une image
var tailleMoveSlide=400;
//fonction gérant l'annimation
function anim()
{
//si on est à la troisième position (0+400+400=800px)
if($('#slidebox').css('right')=='800px')
{
//on revient à zéro
$('#slidebox').animate({right: '0'}, vitesseSlide)
}
//si on est à la seconde position (400px)
else if($('#slidebox').css('right')=='0px')
{
//on va à la troisième (position actuelle + taille(400)=800)
$('#slidebox').animate({right: '+='+tailleMoveSlide}, vitesseSlide)
}
//sinon on est dans la 1ère position, on va à la seconde
else
{
$('#slidebox').animate({right: '+='+tailleMoveSlide}, vitesseSlide)
}
}
//au chargement de la page
$(document).ready(function(){
//on lance l'annimation en boucle toute les secondes (1000 miliseconde)
setInterval('anim();',1000);
});
</script>


le travail est terminé.

lien direct : http://www.chezneg.fr/leblog/chezneg-leblog.php?id_art=185&titre=Faire-une-animation-en-boucle-avec-jQuery-et-setInterval()
tags : Informatique (68), compétences (22), css (12), jQuery (12), javascript (9),


J'aime, 10 personnes aiment çaCommentaire(s)(2)

1) jerk le : 2009-11-18 19:33:07 foo.boo

No commest sille

2) Skelldesign le : 2011-04-11 12:53:48

Merci pour ce tuto, très bien expliqué, très clair, parfait en somme :)

continue!


Ajouter un commentaire :






Les derniers articles :
Ouverture du site profitvacances.com
Utiliser la géolocalisation et styler une carte google map
Faire un slider simplement avec jQuery
Système de pagination en PHP sur une requête Mysql
Trouver les éléments à proximité sous MySql via leurs longitude et latitude
Stockage de données dans le cloud (SugarSync, DropBox, SkyDrive, BitCasa)
PHP : Recuperer les balises images d'un document (une page) HTML
PHP : faire un lecteur RSS grâce à simplexml_load_file
Regarder la TV devant Internet (et inversement)
Albert Dupontel et Benoit Poelvoorde en punks pour le film "le grand soir"

propulsé par Neg