JavaScript图片幻灯片不显示

Question

这里出了什么问题，直到 2 天前一切都工作正常!

JavaScript 代码:

var slideIndex = 0;
carousel();

function carousel() {
    "use strict";
    var i;
    var x = document.getElementsByClassName("istaknutiOglasi");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > x.length) {
        slideIndex = 1;
    }
    x[slideIndex - 1].style.display = "block";
    setTimeout(carousel, 10000);
}

HTML 代码:

<div class="single_sidebar wow fadeInDown">
<h2><span>Istaknuti Oglasi</span></h2>
<div class="sideAdd">
<img class="istaknutiOglasi" src="/images/Istaknuti_Oglasi.png">
<img class="istaknutiOglasi" src="/images/Banner_2.png">
</div>
</div>

在谷歌上显示错误 x[slideIndex - 1].style.display = "block";

Answer 1

有两件事:

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

应改为:

if (slideIndex >= x.length) {
        slideIndex = 0;
    }

和

x[slideIndex - 1].style.display = "block";

应更改为:

x[slideIndex].style.display = "block";

这是一个工作示例

var slideIndex = 0;
carousel();

function carousel() {
    "use strict";
    var i;
    var x = document.getElementsByClassName("istaknutiOglasi");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex >= x.length) {
        slideIndex = 0;
    }
    x[slideIndex].style.display = "block";
    setTimeout(carousel, 1000);
}

<div class="single_sidebar wow fadeInDown">
<h2><span>Istaknuti Oglasi</span></h2>
<div class="sideAdd">
<img class="istaknutiOglasi" src="https://unsplash.it/200/300">
<img class="istaknutiOglasi" src="https://unsplash.it/200/400">
</div>
</div>

发生的情况是索引试图访问数组 (x) 之外的元素。这是一个越界错误。这对您有何帮助!