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> |