Diaporama images avec bouton
Bonsoir,
Je cherche un diaporama tout simple avec 4 boutons : suivant/précédent/debut/fin sans défilement automatique ni boucle.
avec un petit effet de transition entre les images!
Si vous connaissez des liens/exemples ça serait hyper utile
Merci
ps: j'ai cherché sur le net, il y'en a plein , mais je ne trouve pas avec 4 bouton, de plus je ne suis pas pro en jquery!
désactiver un lien pendant n secondes
J'ai cherché sur le net, je n'ai pas vraiment trouvé ce que je cherche .
finalement je me suis mise à faire un diapo tout simple :?
débutant comme algo, mais bon ca marche :roll:
Seul problème, quand on clique sur un lien suivant ou precedent plusieurs fois de suite, on tombe que un moment de vide , pas terrible à voir!
du coup je me demande comment désactiver les lien suivant/précedent pendant n secondes :roll:
Merci!
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
| <?php
$trouve=true;
$nbtotal=0;
for($i=1;$trouve;$i++)
{
if(file_exists('01/image'.$i.'.jpg'))
$nbtotal++;
else $trouve=false;
}
?>
<img src='01/image1.jpg' id="case" width="845" height="362px" alt="" />
<div style="" id="suiv">suiv</div>
<div style="" id="prec">prec</div>
<div style="" id="debut">debut</div>
<div style="" id="fin">fin</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
debut=1;
tot=parseInt("<?php echo $nbtotal; ?>");
$("#debut").click(function () {
debut=1;
document.getElementById('case').src="01/image1.jpg";
document.getElementById('case').style.display='none';
$("#case").hide().fadeIn(); });
$("#fin").click(function () {
debut=tot;
document.getElementById('case').src="01/image"+tot+".jpg";
document.getElementById('case').style.display='none';
$("#case").hide().fadeIn(); });
$("#suiv").click(function () {
if (debut<tot) {debut++;
document.getElementById('case').src="01/image"+debut+".jpg";
document.getElementById('case').style.display='none';
$("#case").hide().fadeIn(); }});
$("#prec").click(function () {
if (debut!=1) { debut--;
document.getElementById('case').src="01/image"+debut+".jpg";
document.getElementById('case').style.display='none';
$("#case").hide().fadeIn(); }});
</script> |