Diaporama Javascript

Signaler
Messages postés
3
Date d'inscription
mardi 11 octobre 2005
Statut
Membre
Dernière intervention
29 avril 2007
-
Messages postés
27
Date d'inscription
vendredi 15 octobre 2010
Statut
Membre
Dernière intervention
12 août 2012
-
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

Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
31
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 />
Messages postés
3
Date d'inscription
mardi 11 octobre 2005
Statut
Membre
Dernière intervention
29 avril 2007

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.
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
31
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 />
Messages postés
3
Date d'inscription
mardi 11 octobre 2005
Statut
Membre
Dernière intervention
29 avril 2007

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.
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
31
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 />
Messages postés
27
Date d'inscription
vendredi 15 octobre 2010
Statut
Membre
Dernière intervention
12 août 2012

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