JavaScript 图片幻灯片不显示答案

【问题标题】：JavaScript picture slideslow not showJavaScript 图片幻灯片不显示
【发布时间】：2017-04-29 14:26:20
【问题描述】：

这里有什么问题，直到 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";显示错误

【问题讨论】：

jsfiddle.net/qgxa98ru 我认为它正在工作

标签： javascript html slideshow

【解决方案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) 之外的元素。这是一个越界错误。这对您有什么帮助！

【讨论】：