Passer un array en paramètre d'une fonction

Version imprimable

14/08/2018, 23h55
vaggarath

Passer un array en paramètre d'une fonction

Avant de venir vous embêter j'ai cherché et.... j'ai trouvé plein de trucs en fait, mais je n'y arrive pas. Je ne comprends pas.... I'm stupid^^

En gros j'ai fournis un code pour un slider. Après l'avoir changé un milliard de fois, j'ai finis par sortir un truc à priori pas trop dégueu. Le slider en question utilise deux arrays/tableaux, un pour les images et un second pour le sous texte des images. Les fonctions sont au nombre de trois : 1 Pour initier. Une qui incrémente et permet de passer à l'item suivant du tableau. Et la troisième qui fait l'inverse, à savoir décrémente et revient à la slide précédente.

Et dernier truc qu'on me demande serait de passer les tableaux en paramètres de mes fonctions. Et grosso merdo c'est là que j'ai commencé à saigner du nez... ^^

Si une âme charitable veut bien m'aider et m'expliquer comment faire je suis plus que preneur :p (ouais je suis gourmand, j'voudrais comprendre ce que je fais ^^)

Le code est ici : https://codepen.io/vaggarath/pen/WKBedP

:salut:

Exemple d'Object Slider en ES2015 :

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<header>
    <img id="image1" />
    <div id="controle">
        <p id="prec">Précédent</p>
        <p id="suiv">suivant</p>
    </div>
    <div id="texte">
        <p></p>
    </div>
    <script>
        const
            suivant = document.querySelector('#suiv'),
            precedent = document.querySelector('#prec'),
            elemImg = document.querySelector('#image1'),
            elemTxt = document.querySelector('#texte'),
            Slider = {
                index: 0,
 
                arImg: [
                    'https://picsum.photos/200/300?image=0',
                    'https://picsum.photos/200/300?image=1',
                    'https://picsum.photos/200/300?image=2',
                    'https://picsum.photos/200/300?image=3',
                ],
 
                arTxt: [
                    "<p>texte 1</p>",
                    "<p>texte 2</p>",
                    "<p>texte 3</p>",
                    "<p>texte 4</p>",
                ],
 
                init() {
                    Slider.index = 0;
                    elemImg.src = Slider.arImg[Slider.index];
                    elemTxt.innerHTML = Slider.arTxt[Slider.index];
                },
 
                slideImg() {
                    if (Slider.index === 3) {
                        Slider.index = -1;
                    };
 
                    Slider.index++;
 
                    elemImg.src = Slider.arImg[Slider.index];
                    elemTxt.innerHTML = Slider.arTxt[Slider.index];
                },
 
                retour() {
                    if (Slider.index == 0) {
                        Slider.index = 4;
                    };
 
                    Slider.index--;
 
                    elemImg.src = Slider.arImg[Slider.index];
                    elemTxt.innerHTML = Slider.arTxt[Slider.index];
                },
            };
 
        Slider.init();
 
        suivant.addEventListener('click', function () {
            Slider.slideImg();
        })
 
        precedent.addEventListener('click', function () {
            Slider.retour();
        })
 
        function checkKeyPress(key) {
            if (key.keyCode == "37") { // flèche gauche
                Slider.retour();
            } else if (key.keyCode == "39") { // flèche droite
                Slider.slideImg();
            }
        }
 
        window.addEventListener('keydown', checkKeyPress, {
            capture: false,
            passive: true,
            once: false
        });
    </script>
</header>

15/08/2018, 18h34
vaggarath

Merci beaucoup :)

J'avais finis par trouver une solution +/- similaire mais en m'enquiquinant avec plus de lignes ! ^^

Merci encore^^