Java Script diaporama n'affiche pas les diapos

Question

J'ai codé ce diaporama JavaScript pour afficher un certain nombre d'images, mais ils ne sont affichés nulle part, la seule chose montrant sont les deux boutons que j'ai inclus pour choisir les diapositives.

var slideIndex = 1; 
 
showDivs(slideIndex); 
 
function plusDivs(n) { 
 
    showDivs(slideIndex += n); 
 
} 
 
function showDivs(n) { 
 
    var i; 
 
    var x= document.getElementsByClassName("slides"); 
 
    if (n > x.length) {slideIndex = 1} 
 
     if (n < 1) {slideIndex = x.length} ; 
 
    for (i = 0; i < x.length; i++) { 
 
     x[i].style.display = "none"; 
 
    } 
 
    x[slideIndex-1].style.display = "block"; 
 
}

 <img class="slides" href="Bgimage.jpg"> 
 
     <img class="slides" href="roses.jpg"> 
 
     <img class="slides" href="sunflowers.jpg"> 
 
     <img class="slides" href="Vessel1.jpg"> 
 
     <button class="go-left" onclick="plusDivs(-1)">&#10094</button> 
 
     <button class="go-right" onclick="plusDivs(+1)">&#10095</button> 
 

Toute aide est très appréciée. Merci!

Answer 1

La balise img utilise src pour déterminer la source de l'image. Si vous modifiez href à src, vous devriez pouvoir revoir les images.

<img class="slides" src="Bgimage.jpg"> 
<img class="slides" src="roses.jpg"> 
<img class="slides" src="sunflowers.jpg"> 
<img class="slides" src="Vessel1.jpg"> 

Answer 2

tag Img a src pas href. Votre code fonctionne parfaitement.

var slideIndex = 1; 
 
showDivs(slideIndex); 
 
function plusDivs(n) { 
 
    showDivs(slideIndex += n); 
 
} 
 
function showDivs(n) { 
 
    var i; 
 
    var x= document.getElementsByClassName("slides"); 
 
    if (n > x.length) {slideIndex = 1} 
 
     if (n < 1) {slideIndex = x.length} ; 
 
    for (i = 0; i < x.length; i++) { 
 
     x[i].style.display = "none"; 
 
    } 
 
    x[slideIndex-1].style.display = "block"; 
 
}

<img class="slides" src="http://fakeimg.pl/250x100/"> 
 
     <img class="slides" src="http://fakeimg.pl/250x100/ff0000/"> 
 
     <img class="slides" src="http://fakeimg.pl/350x200/ff0000/000"> 
 
     <img class="slides" src="http://fakeimg.pl/250x100/ff0000/"> 
 
     <button class="go-left" onclick="plusDivs(-1)">&#10094</button> 
 
     <button class="go-right" onclick="plusDivs(+1)">&#10095</button>

Answer 3

var slideIndex = 0; 
 
showDivs(slideIndex); 
 
function plusDivs(n) { 
 
    showDivs(slideIndex += n); 
 
} 
 
function showDivs(n) { 
 
    var i; 
 
    var x= document.getElementsByClassName("slides"); 
 
    if (n >= x.length) { slideIndex = 0; } 
 
    if (n < 0) { slideIndex = x.length-1; } 
 

 
    for (i = 0; i < x.length; i++) { 
 
     if(i!==slideIndex) { 
 
      x[i].style.display = "none"; 
 
     } else { 
 
      x[i].style.display = "block"; 
 
     } 
 
    } 
 
}

 <img class="slides" src="Bgimage.jpg"> 
 
     <img class="slides" src="roses.jpg"> 
 
     <img class="slides" src="sunflowers.jpg"> 
 
     <img class="slides" src="Vessel1.jpg"> 
 
     <button class="go-left" onclick="plusDivs(-1)">&#10094</button> 
 
     <button class="go-right" onclick="plusDivs(+1)">&#10095</button>