Script de Slideshow dans un HTML en erreur
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:
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> |
