Tutoriel N° 66
Ce tutoriel va vous permettre de faire scroller 3 images successives.
Il est facilement adaptable pour en mettre plus.
Vous aurez besoin de la librairie jquery
Voici le code à insérer entre les balises <head> et </head>
J'utilise dans cette source la librairie de google mais je vous encourage l'héberger sur votre serveur et à récupérer jquery-1.4.1.min.js
style.css
#conteneur {
height: 286px;
width: 892px;
overflow:hidden;
position:relative;
}
#slidebox
{
position:relative;
width:2676px;
}
Adapter ce css à votre convenance, le width de 2676 a été obtenu puisque j'affiche 3 images successives de 892 pixels.
tutoriel.66.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<link type="text/css" href="style.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<SCRIPT language=JavaScript>
$(document).ready(function(){
$('#bloc_big2').hide();
$("#bloc_big2").fadeIn("slow");
var tailleMoveSlide=892;
var vitesseSlide=5000;
var vitesseSlide2=2500;
$(document).ready(function(){
$('#conteneur').hide();
$("#conteneur").fadeIn("slow");
});
$(".slide2").ready(function(){
$("#slidebox")
.animate({right: tailleMoveSlide}, vitesseSlide)
$("#slidebox")
.animate({right: tailleMoveSlide*2}, vitesseSlide)
$("#slidebox")
.animate({right: "0"}, vitesseSlide2)
return false;
});
});
</script>
</head>
<body>
<div id="conteneur">
<div id="slidebox">
<img src="http://www.shareannonce.com/bigimage.png"/><img src="http://www.shareannonce.com/bigimage.png"/><img src="http://www.shareannonce.com/bigimage.png"/>
</div>
</div>
</body>
</html>
Fin.
