html - (HTML/Javascript) 无法在 javascript 中找到入口类 "imagechange"

Question

我已经删除了几段代码以查明它在 div“wrapper”中的位置和背后的内容。还有更多的 div 用于显示其他内容，但它们没有“changeimage”的类名。

<div id="wrapper">
        <div id="content">
            <div align="center" id="imagesbar">
            <img class="changeimage" src="image1.jpg"/>
            </div>
            <div align="center" id="imagestext">
                <h1 class="headertext"><strong>What we do.</strong></h1>
                <br /><p class="circle" >Mowing</p>
                <p class="circle">Lawn Care</p>
                <p class="circle">Weed Removing</p>
            </div>
        </div>
    </div>

和 JavaScript:

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg', 'image6.jpg', 'image7.jpg'];
var interval = setInterval(changeImage, 4000);
var index = 0;

function changeImage(){
    //alert("changing image")
    document.getElementsByClassName("changeimage").src = images[index];
    index++;
}

在“document.getElementsByClassName("changeimage")”这一行中，有错误的代码。似乎我正在使用的浏览器(Chrome)找不到类名“changeimage”。我想将类名称为“changeimage”的 HTML 条目 img 上的 src 标记更改为字符串数组中的不同位置在 JavaScript 中取决于索引。

Answer 1

由于 document.getElementsByClassName 返回的是一个元素数组，所以需要引用第 0 个元素。此外，必须重置索引以避免读取超出数组的长度

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg', 'image6.jpg', 'image7.jpg'];
var interval = setInterval(changeImage, 4000);
var index = 0;

function changeImage(){
    //alert("changing image")
    document.getElementsByClassName("changeimage")[0].src = images[index]; // assuming only one classname
    index++;
    if(index >= images.length) {
       index = 0;
    }
}