Discussion :

[Zeus_Appolos]

Bonjour ma famille, je prie de m'aider à corriger mon JavaScript. j'ai adapté un script pris sur google concernant la selection au click. ça, ça marche. je veux par la suite faire defiler les images automatiquement apres le chargement de la page avec selection de l'image en cours. mais ça plante.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 <div class="image-galerie">
            <div id="big">
                <img src="images/stars/afrique-mon-afrique.png" alt="" id="gformat">
                <div class="description"><a href=""></a></div>
            </div>
            <div id="small">
                <div class="miniature"><img src="images/stars/sala-mohamed.jpg" alt="drogba" id="mini1" onclick="selection(1);"></div>
                <div class="miniature"><img src="images/stars/eto-samuel.jpg" alt="eto" id="mini2" onclick="selection(2);"></div>
                <div class="miniature"><img src="images/stars/kolo-yaya.jpg" alt="kolo-yaya" id="mini3" onclick="selection(3);"></div>
                <div class="miniature"> <img src="images/stars/neymar-junior.jpg" alt="neymar" id="mini4" onclick="selection(4);"></div>
                <div class="miniature"> <img src="images/stars/messi-ronaldo.jpg" alt="messi-ronaldo" id="mini5" onclick="selection(5);"></div>
                <div class="miniature"><img src="images/stars/sadio-mane.jpg" alt="sadio" id="mini6" onclick="selection(6);"></div>
                <div class="miniature"><img src="images/stars/gervinho-kouassi.jpg" alt="gervinho" id="mini7" onclick="selection(7);"></div>
                <div class="miniature"><img src="images/stars/trophee-2015.jpg" alt="trophee-2015" id="mini8" onclick="selection(8);"></div>
                <div class="miniature"><img src="images/stars/ngolo-kante.jpg" alt="trophee-2015" id="mini9" onclick="selection(9);"></div>
                <div class="miniature"><img src="images/stars/essien-drogba.jpg" alt="trophee-2015" id="mini10" onclick="selection(10);"></div>
                <div class="miniature"><img src="images/stars/Yaya-Toure.jpg" alt="trophee-2015" id="mini11" onclick="selection(11);"></div>
                <div class="miniature"><img src="images/stars/kalou-salomon.jpg" alt="trophee-2015" id="mini12" onclick="selection(12);"></div>
            </div>
        </div>
        <hr>
        <div id="btn-demarrer"><button type="button" id="btn" onclick="demarrer();">demarrer</button></div>
        <script src="js/album.js" type="text/javascript"></script>

code js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 var chaine_img="sala-mohamed.jpg;eto-samuel.jpg;kolo-yaya.jpg;neymar-junior.jpg;messi-ronaldo.jpg;sadio-mane.jpg;gervinho-kouassi.jpg;";
    chaine_img +="trophee-2015.jpg;ngolo-kante.jpg;essien-drogba.jpg;Yaya-Toure.jpg;kalou-salomon.jpg";
 
    var tab_img=chaine_img.split(';');
    var nb_img=tab_img.length;
    var chemin='images/stars/';
    var position=0;
    var interval=0;
    var indice=1;
    var temporisation=3000;
 
var i=1;
        function demarrer() {
            while (i<= nb_img){
                setInterval(selection(i), temporisation) ;
                //alert(i);
                i++;
                if (i>nb_img){
                    i=1;
                    document.getElementById('mini'+nb_img).style.border='#000 1px solid';
                }
            }
        }
 
    function selection(img_source) {
        var image_en_cours=document.getElementById('mini'+img_source).src;
        var post_caractere = image_en_cours.lastIndexOf('/',img_source);
        document.getElementById('gformat').src = image_en_cours;
        for (var indice=1;indice<nb_img;indice++){
            document.getElementById('mini'+indice).style.border='#000 1px solid';
        }
        document.getElementById('mini'+img_source).style.border='#fff 3px solid';
 
        image_en_cours=image_en_cours.substring(post_caractere+1);
        for (var defil=0;defil<nb_img;defil++){
            if (tab_img[defil]===image_en_cours){
                alert(tab_img[defil]);
                alert(image_en_cours);
                position=defil;
                break;
            }
        }
    }

d'avance merci.

[Zeus_Appolos]

merci beaucoup après avoir supprimer la boucle, j'ai réussi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var i=1;
    function  demarrer(){
        var res2=setInterval(function (){
            var image_en_cours = document.getElementById('mini' + i).src;
            var post_caractere = image_en_cours.lastIndexOf('/', i);
            document.getElementById('gformat').src = image_en_cours;
            for (var indice = 1; indice <= nb_img; indice++) {
                document.getElementById('mini' + indice).style.border = '#000 3px solid';
            }
            document.getElementById('mini' + i).style.border = '#fff 3px solid';
            if (i === nb_img) {
                i = 0;
            }
            i++;
        }, temporisation);
    }

Mon soucis maintenant c'est de reprendre le defiler à partir de la selection. une casse-tete ...