SlideShow sans CSS3

Soyez le premier à donner votre avis sur cette source.

Snippet vu 5 261 fois - Téléchargée 14 fois

Contenu du snippet

Il est à la mode avec la venue du CSS 3 : le slide show automatique !

Seulement le CSS3 n'est pas encore interpréter par tous les navigateurs :(

Alors je me suis pris la tête avec javascript pour une solution alternative (IE, FF & GC).

Slide show avec 4 images de 600px X 400 px

Voir la démonstration : http://jlmconsultant.fr/test/diapo01.php

------------------------------------------------------- 

<body OnLoad="Preload();Affiche();"> 

------------------------------------------------------- 

<div id="DivImg" style="width:600px;height:400px;border:1px solid;overflow:hidden;" > 
<div style="font-size:1px;letter-spacing:-1px;white-space:nowrap;display:inline;float:left" > 
<img src="img1.jpg" width="600" height="400" > 
<img src="img2.jpg" width="600" height="400" > 
<img src="img3.jpg" width="600" height="400" > 
<img src="img4.jpg" width="600" height="400" > 
</div> 
</div> 

-------------------------------------------------------
<script type="text/javascript"> 

// PRELOAD DES IMAGES 

var Photos = new Array('img1.jpg','img2.jpg','img3.jpg','img4.jpg') ; 

function Preload() 
{ 
photos_chargées = new Array() ; 
 for ( i = 0 ; i<Photos.length ; i++ ) 
 { 
 photos_chargées[i] = new Image() ; 
 photos_chargées[i].src = Photos[i] ; 
 } 
} 

// SLIDE SHOW 

var Timer ; 
var Depl = 0 ; 
var Num = 0 ; 
var Vitesse ; 
var Sens ; 

function Affiche() 
{ 
var Contenu = document.getElementById("DivImg") ; 
Contenu.scrollLeft += Depl ;  
 if ( Num == 0 || Num == 100 || Num == 200 || Num == 300 ) 
 Vitesse = 3000 ; 
 else 
 Vitesse = 1 ; 
 if ( Num == 0 ) 
 Sens = "G" ; 
 if ( Num == 300 ) 
 Sens = "D" ; 
 if ( Sens == "G" ) 
 { 
 Num++ ; 
 Depl = 6 ; 
 Sens = "G" ; 
 } 
 if ( Sens == "D" ) 
 { 
 Num-- ; 
 Depl = -6 ; 
 Sens = "D" ; 
 } 
Timer = setTimeout('Affiche()', Vitesse) ; 
} 

</script>

A voir également

Ajouter un commentaire

Commentaires

Messages postés
21
Date d'inscription
mardi 2 novembre 2004
Statut
Membre
Dernière intervention
18 décembre 2013

juste pour info fonctionne très bien avec opera
y a juste un bug de +1px (+2+3 etc) sur la gauche de l'image
Pas mal du tout !
Messages postés
1
Date d'inscription
mardi 23 juin 2009
Statut
Membre
Dernière intervention
5 décembre 2013

*****
C'est super...
Merci

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.