Diaporama Javascript

cs_tug Messages postés 3 Date d'inscription mardi 11 octobre 2005 Statut Membre Dernière intervention 29 avril 2007 - 27 avril 2007 à 22:46
sartoz Messages postés 27 Date d'inscription vendredi 15 octobre 2010 Statut Membre Dernière intervention 12 août 2012 - 21 févr. 2011 à 21:11
Bonjour,



J'aimerais faire un défilement de 15 images dont 5 sont deja visibles sur la surface de pre affichage et à l'aide des boutons suivante et precedente parcourir chaque image jusqu'à la 15ème et après la 1ère suive  et ainsi de suite... et que chacune soit cliquable et qui s'affiche en haut sur la surface d'affichage, ca tournera donc en boucle.
Est-ce que quelqu'un pourrait m'aider ou même me donner un exemple de script?
Merci à tous.

6 réponses

cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
28 avril 2007 à 09:50
Bonjour,

    tu as regardé dans les sources de ce site ?
    parce que des diaporamas il y en a une foultitude.
    après si tu en adoptes un, que tu l'adaptes à tes besoins,
       et que tu as des difficultés à le mettre au point, en nous
       postant et en nous explicant ce qui cloche, on devrait
       pouvoir t'aider.

<hr />


Cordialement            Bul     [mon Site]     [M'écrire]



<hr />
0
cs_tug Messages postés 3 Date d'inscription mardi 11 octobre 2005 Statut Membre Dernière intervention 29 avril 2007
29 avril 2007 à 09:42
Salut,
Milles mercis de m'avoir répondu!
J'avais deja regardé les autres scripts pour essayer d'adapter à celui que j'ai mais j'ai rien trouvé qui me convienne...
Alors voici mon code:

<HTML>
<HEAD>

<script type="text/javascript">
function moveleft(){
pointer=pointer-1
image1=document.getElementById("preview1")
image1.src=images[pointer]
image2=document.getElementById("preview2")
image2.src=images[pointer+1]
image3=document.getElementById("preview3")
image3.src=images[pointer+2]
image4=document.getElementById("preview4")
image4.src=images[pointer+3]
image5=document.getElementById("preview5")
image5.src=images[pointer+4]
image=document.getElementById("main")
image.src=images[pointer+2]
}

function moveright() {
pointer=pointer+1
image1=document.getElementById("preview1")
image1.src=images[pointer]
image2=document.getElementById("preview2")
image2.src=images[pointer+1]
image3=document.getElementById("preview3")
image3.src=images[pointer+2]
image4=document.getElementById("preview4")
image4.src=images[pointer+3]
image5=document.getElementById("preview5")
image5.src=images[pointer+4]
image=document.getElementById("main")
image.src=images[pointer+2]
}
</script>


,

----

<table border="0">
----, </td>

<script type=\"text/javascript\">
images = new Array()
images[1] = \"img1.jpg\"
images[2] = \"img2.jpg\"
images[3] = \"img3.jpg\"
images[4] = \"img4.jpg\"
images[5] = \"img5.jpg\"
images[6] = \"img6.jpg\"
images[7] = \"img7.jpg\"
images[8] = \"img8.jpg\"
images[9] = \"img9.jpg\"
images[10] = \"img10.jpg\"
images[11] = \"img11.jpg\"
images[12] = \"img12.jpg\"
images[13] = \"img13.jpg\"
images[14] = \"img14.jpg\"
images[15] = \"img15.jpg\"

document.write(\", \")

document.write(\", \")

document.write(\", \")

document.write(\", \")

document.write(\", \")

pointer = 1

</script>


</td>
</tr>
</Table>


L'image courante est celle de la position 3.
Il faudrait ajouter qualque chose dans la fonction moveleft() et moveright() pour que les images tournent en boucle. E pour les liens images le probleme c'est que je ne sais pas quoi mettre dans href=?? pour que l'image s'affiche juste en haut.
Par exemple: document.write("<td> </td>")

Quelqu'un peut m'aider?

Merci.
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
29 avril 2007 à 12:44
et tu veux afficher 1.2.3.4.5 puis 6.7.8.9.10....
ou 1.2.3.4.5 puis 2.3.4.5.6... ?

ch'tit exemple avec la 1ère possibilité

<HTML>
<HEAD>
<form name= "frm">
   
   
   
   
   
</form>   
<script type="text/javascript">
function g(){
    for ( var n=0;n<document.frm.imgDef.length;n++ )
    {
        actuel--;
        if ( actuel<0 ) actuel=imgArr.length-1;
        document.frm.imgDef[n].src=imgArr[actuel];
    }
}
</script>

<script type="text/javascript">
imgArr = new Array(   "toto1.gif","image2.gif","g3.gif","ah.gif","euh.gif",
                                      "img6.gif","img7.gif","img8.gif","img9.gif","img10.gif",
                                      "img11.gif","img12.gif","img13.gif","img14.gif","img15.gif");
    for ( var n=0;n<document.frm.imgDef.length;n++ )
    {
        document.frm.imgDef[n].src=imgArr[n];
    }
    var actuel=document.frm.imgDef.length-1;  
</script>
à gauche

    pour défiler vers la droite, ou comme la 2ème possibilité
       tu devrais parvenir à adapter... au moins essayer.
       sinon dis nous...

    si tu veux que cela soit automatique, "il suffit" d'appeler
       la fonction g() avec setInterval par exemple.

<hr />


Cordialement            Bul     [mon Site]     [=Bul M'écrire]



<hr />
0
cs_tug Messages postés 3 Date d'inscription mardi 11 octobre 2005 Statut Membre Dernière intervention 29 avril 2007
29 avril 2007 à 17:14
Salut!
Milles mercis pour m'avoir repondu!
En fait c'est plutot la deuxième possibilité, soit 1.2.3.4.5 puis 2.3.4.5.6.
Je débute en javascript, je n'arrive pas à adapter ce que tu viens de me montrer.  Est-ce que tu pourrais ajouter dans mon code ce qu'il faut, dans mes fonctions moveleft() et moveright() pour que ça tourne en boucle?

Merci enormement d'avance.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
30 avril 2007 à 08:41
si je comprend bien tu attends que quelqu'un te fasse tout.
ça servirait à quoi ? tu n'apprendrais rien.
c'est en forgeant qu'on devient forgeron.
<hr />


Cordialement            Bul     [mon Site]     [M'écrire]



<hr />
0
sartoz Messages postés 27 Date d'inscription vendredi 15 octobre 2010 Statut Membre Dernière intervention 12 août 2012
21 févr. 2011 à 21:11
<script>
var imgs=new Array();
imgs[0]="fichiers/image1.jpg";
imgs[1]="fichiers/image2.jpg";
imgs[2]="fichiers/image3.jpg";
imgs[3]="fichiers/image4.jpg";
imgs[4]="fichiers/image5.jpg";
imgs[5]="fichiers/image6.jpg";
var cpt=0;
function changeimages()
{
document.getElementById("ima").src=imgs[cpt];
cpt++;
if(cpt>=imgs.length) cpt=0;
setTimeout("changeimages()",5000);
}
</script>

<noscript>ajax</noscript>
0
Rejoignez-nous