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>

在 google 上显示 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) 之外的元素。这是一个越界错误。这对您有何帮助！

JavaScript 图片幻灯片不显示

JavaScript picture slideslow not show

html

javascript

slideshow