SlideShow sans CSS3

Commenter

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

S'inscrire maintenant

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.

Du même auteur (JLM Consultant)