这个javascript滑块有什么问题？

Question

this is my first time try javascript this image slider is not working and I don't know what is wrong this is what I tried to do https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_self

 var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function showDivs (n) { var i; var x = document.getElementByClassName("mySlides"); 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"; } 

 .container { width:980px; position: relative; } .container img { width: 100%; } button { position: absolute; color: black; background: white; width: 50px; height: 50px; } .left { top:50%; left: :0; } .right { top:50%; right: 0; } 

 <div class="container"> <img class="mySlides" src= "images/img_fjords.jpg"> <img class="mySlides" src="images/img_forest.jpg"> <img class="mySlides" src="images/img_lights.jpg"> <button class="left" onclick = "plusDivs(-1)">&#10094;</button> <button class="right" onclick = "plusDivs(+1)">&#10095;</button> </div> 

Answer 1

You need to change your for to

for (i = 0; i < x.length; i++) {

instead of:

for (i = 0, i < x.length, i++) {

(use ; instead of , ).

and change getElementByClassName to getElementsByClassName (notice the s at the end of Elements).

 var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function showDivs (n) { var i; var x = document.getElementsByClassName("mySlides"); 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"; } 

 .container { width:980px; position: relative; } .container img { width: 100%; } button { position: absolute; color: black; background: white; width: 50px; height: 50px; } .left { top:50%; left: :0; } .right { top:50%; right: 0; } 

 <div class="container"> <img class="mySlides" src= "http://placehold.it/500"> <img class="mySlides" src="http://placehold.it/501"> <img class="mySlides" src="http://placehold.it/502"> <button class="left" onclick = "plusDivs(-1)">&#10094;</button> <button class="right" onclick = "plusDivs(+1)">&#10095;</button> </div>