Script de Slideshow dans un HTML en erreur

**santaflam** · 15/09/2018, 15h06

Bonjour,

J'ai pris le code du W3C.CSS pour scripter un Sllideshow dans mon HTML.
Le code saute une image au milieu du SlideShow (voir code-joint) lorsque j'utilise la fonction plusDivs (l'affichage des petites images en dessous, elle, marche sans problème) mais le plusDivs passe de la 2ième image à la 4ième systématiquement puis revient à l'image de départ.

il y a soit une erreur d'index, soit par mégarde j'ai virré un attribut du CSS... Le code marchait hier et ce n'est pas une erreur de localisation de l'image parce que je peux reproduire l'erreur sur n'importe quel Slideshow et série d'images.

Je n'arrive pas à voir si c'est une erreur d'index dans le Script ou bien un display du CSS...?!

Le <style> est à la fin derrière le <script>.

Merci pour toute info!
Santaf

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
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
 
<html>
 
<head>
    <meta "charset=utf-8">
</head>
<body>
 
<div class="w3-content" style="max-width:900px">
  <img class="mySlides" src=".\img\BLUE_PROFIL.jpg" style="width:100%" onclick="plusDivs(1)">
  <img class="mySlides" src=".\img\BLUE_FRONT.jpg" style="width:100%" onclick="plusDivs(2)">
  <img class="mySlides" src=".\img\BLUE_GUIDON.jpg" style="width:100%" onclick="plusDivs(3)">
  <img class="mySlides" src=".\img\BLUE_DERAILLEUR.jpg" style="width:100%" onclick="plusDivs(4)">
  <img class="mySlides" src=".\img\BLUE_SELLE.jpg" style="width:100%" onclick="plusDivs(5)">
 
  <div class="w3-row-padding w3-section">
    <div class="w3-col s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src=".\img\BLUE_PROFIL.jpg" style="width:100%" onclick="currentDiv(1)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src=".\img\BLUE_FRONT.jpg" style="width:100%" onclick="currentDiv(2)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src=".\img\BLUE_GUIDON.jpg" style="width:100%" onclick="currentDiv(3)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src=".\img\BLUE_DERAILLEUR.jpg" style="width:100%" onclick="currentDiv(4)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-opacity w3-hover-opacity-off" src=".\img\BLUE_SELLE.jpg" style="width:100%" onclick="currentDiv(5)">
    </div>
  </div>
</div>
 
</body>
 
 
<script>
        var slideIndex = 1;
        showDivs(slideIndex);
 
        function plusDivs(n) {
          showDivs(slideIndex += n);
        }
 
        function currentDiv(n) {
          showDivs(slideIndex = n);
        }
 
        function showDivs(n) {
          var i;
          var x = document.getElementsByClassName("mySlides");
          var dots = document.getElementsByClassName("demo");
          if (n > x.length) {slideIndex = 1}
          if (n < 1) {slideIndex = x.length}
          for (i = 0; i < x.length; i++) {
                 x[i].style.display = "none";
          }
          for (i = 0; i < dots.length; i++) {
                 dots[i].className = dots[i].className.replace("w3-opacity-off", "");
          }
          x[slideIndex-1].style.display = "block";
          dots[slideIndex-1].className += "w3-opacity-off";
        }
</script>
 
<style>
 
        .mySlides 
        {
        display:none;
        }
        .demo
        {
        cursor:pointer;
        }
 
        .w3-container:after,.w3-container:before,.w3-row-padding:after,.w3-row-padding:before
        {
        content:"";
        display:table;
        clear:both;
        }
 
        .w3-container
        {
        padding:2px 2px;
        }
 
        .w3-content
        {
        max-width: 960px;
        margin: auto;
        border: #9A9A9A solid 3px;
        }
 
        .w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col
        {
        padding-top: 2px;
        padding-right: 2px;
 
        }
 
        .w3-section
        {
        margin-top:5px;
        margin-bottom:5px;
        }
 
        .w3-col
        {
        float:left;
        width:100%
        }
 
        .w3-col.s4
        {
        width:18%
        }
 
        .w3-opacity{opacity:0.60}
        .w3-opacity-off{opacity:1}
        .w3-hover-opacity-off:hover{opacity:1}
 
</style>
 
</html>

**badaze** · 15/09/2018, 20h13

Pour passer à l'image suivante il faut faire +1 et pas +n.

Code html :

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

1
2
3
4
5
6
 
  <img class="mySlides" src=".\img\1.jpg" style="width:100%" onclick="plusDivs(1)">
  <img class="mySlides" src=".\img\2.jpg" style="width:100%" onclick="plusDivs(1)">
  <img class="mySlides" src=".\img\3.jpg" style="width:100%" onclick="plusDivs(1)">
  <img class="mySlides" src=".\img\4.jpg" style="width:100%" onclick="plusDivs(1)">
  <img class="mySlides" src=".\img\5.jpg" style="width:100%" onclick="plusDivs(1)">

**santaflam** · 15/09/2018, 20h35

Oh purée! Merci beaucoup!
Ils ont même faux dans le w3Schools, et quiche je l'ai downloadé 2 fois sans m'en apercevoir:
https://www.w3schools.com/w3css/tryi...deshow_imgdots

**NoSmoking** · 16/09/2018, 09h30

Bonjour,

Ils ont même faux dans le w3Schools, ...

Non ils n'ont pas eu la même approche que toi, à quoi te sert de mettre un événnement sur les images qui s'affiche en grand

Code html :

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

1
2
3
4
5
<img class="mySlides" src=".\img\BLUE_PROFIL.jpg" style="width:100%" onclick="plusDivs(1)">
<img class="mySlides" src=".\img\BLUE_FRONT.jpg" style="width:100%" onclick="plusDivs(2)">
<img class="mySlides" src=".\img\BLUE_GUIDON.jpg" style="width:100%" onclick="plusDivs(3)">
<img class="mySlides" src=".\img\BLUE_DERAILLEUR.jpg" style="width:100%" onclick="plusDivs(4)">
<img class="mySlides" src=".\img\BLUE_SELLE.jpg" style="width:100%" onclick="plusDivs(5)">

**santaflam** · 18/09/2018, 01h55

Envoyé par NoSmoking

Bonjour,

Non ils n'ont pas eu la même approche que toi, à quoi te sert de mettre un événnement sur les images qui s'affiche en grand

Et bien ça sert énormément de mettre un événement sur l'image en grand. Tu n'as pas à mettre de lunettes pour chercher les flêches qui permettent le défilement -souvent leur couleur se confond avec le fond de l'image- Ensuite tu n'as pas à déplacer ta souris à droite puis à gauche pour aller chercher les flêches. En gros tu navigues 3 fois plus vite sans fatiguer tes yeux.
Je vénère les sites qui font comme ça!

Pour l'approche de l'exemple W3Schools, on remarque qu'il n'ont pas mis d'évenements. Le script est là, donc moi, j'ai pensé qu'il l'ont mis au cas où un gars veut mettre les flêches de défilement (le cas général) ou des boutons + et - (encore pire point de vue convivialité), ou bien sans les flêches comme je fais ici.

Ou bien alors j'ai pas compris un truc... A quoi sert de mettre "+n" au lieu de "+1" ?

**NoSmoking** · 20/09/2018, 15h37

En règle générale, bien qu'il ne faille pas généraliser, le clic sur l'image déclenche la mise en plein écran de cette image ou la redirection vers un lien, c'est le comportement communément attendu, mais en aucun cas le passage à l'image suivante, qu'en est-il du passage à l'image précédente dans ce cas. Le top étant une navigation au clavier.

Là où je te rejoins c'est sur la visibilité des flèches qui sont assez souvent mal visibles ou mal placées. Elles devraient apparaître clairement au survol de l'image.

En gros tu navigues 3 fois plus vite sans fatiguer tes yeux.

Il suffit de laisser le curseur de la souris à la même position et de cliquer non !?!

Je vénère les sites qui font comme ça!

Je n'en ai pas croisé souvent à vrai dire !

A quoi sert de mettre "+n" au lieu de "+1" ?

Je pense que tu as simplement fait la confusion entre les fonctions currentDiv et plusDivs.