(HTML / Javascript)无法在javascript中找到条目类“imagechange”

时间:2018-06-05 00:58:02

标签: html css

我删除了一些代码,以便在divwrapper”中找出它的位置和背后的内容。还有更多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”。我想将类别为“src”的HTML条目img上的changeimage标记更改为JavaScript中字符串数组中的不同位置,具体取决于索引。< / p>

1 个答案:

答案 0 :(得分:5)

由于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;
    }
}