SlideShow sans CSS3
Soyez le premier à donner votre avis sur cette source.
Snippet vu 6 819 fois - Téléchargée 16 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
-------------------------------------------------------
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>
18 déc. 2013 à 11:17
y a juste un bug de +1px (+2+3 etc) sur la gauche de l'image
6 déc. 2013 à 09:30
5 déc. 2013 à 19:04
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.