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>