Код слайд-шоу не работает в Javascript

Question

Я сделал слайд-шоу.Это HTML-код!

<div class="slideshow-container">
    <div class="mySlides fade">
        <img src="img/background.png" style="width:100%">
    </div>
    <div class="mySlides fade">
        <img src="img/background2.png" style="width:100%">
    </div>
    <div class="mySlides fade">
        <img src="img/background3.png" style="width:100%">
    </div>
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>

, а это код JavaScript

<script>
    var slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
        showSlides(slideIndex += n); 
    }

    function showSlides(slideIndex) {
        var i;
        var slides = document.getElementsByClassName("mySlides");

        if (slideIndex > slides.length) { slideIndex = 1; }
        if (slideIndex < 1) { slideIndex = slides.length; }

        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        slides[slideIndex - 1].style.display = "block"; 
    }
</script>

, но по неизвестным причинам он не работает должным образом, отладьте и объясните, почему этот кодне работает?

Answer 1

Вы определяете свою индексную переменную дважды: slideIndex.Один раз как глобальная переменная, а затем как параметр функции, перезаписывается только значение параметра функции.Вы можете удалить параметр функции и увеличить / уменьшить значение slideIndex в вашей функции plusSlides.

var slideIndex = 1;
showSlides();

function plusSlides(n) {
  slideIndex += n;
    showSlides(); 
}

function showSlides() {

    var slides = document.getElementsByClassName("mySlides");

    if (slideIndex > slides.length) { slideIndex = 1; }
    if (slideIndex < 1) { slideIndex = slides.length; }

    for (var i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    slides[slideIndex - 1].style.display = "block"; 
}