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

Du même auteur (JLM Consultant)