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>
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.