Question

我有这个3x3 img画廊。我需要所有人用JS改变每一个时间。到目前为止，我设法对其中一个图像执行此操作。我不知道如何针对他们。

<script>
var images = ["http://lorempixel.com/250/200/", "http://lorempixel.com/250/150/"];
var i = 0;
var renew = setInterval(function(){
if(images.length == i){
i = 0;
}
else {
document.getElementByClassName('galleryItem').src = images[i];
i++;
}
},1000);
</script>

<div class="galleryWrapper">
<div class="galleryItem item1">
<img id="image1" src="http://lorempixel.com/250/200/" alt="picture1">
</div>
<div class="galleryItem item2">
<img id="image2" src="http://lorempixel.com/250/200/" alt="picture2">
</div>
<div class="galleryItem item3">
<img id="image3" src="http://lorempixel.com/250/200/" alt="picture3">
</div>
<div class="galleryItem item4">
<img id="image4" src="http://lorempixel.com/250/200/" alt="picture4">
</div>
<div class="galleryItem item5">
<img id="image5" src="http://lorempixel.com/250/200/" alt="picture5">
</div>
<div class="galleryItem item6">
<img id="image6" src="http://lorempixel.com/250/200/" alt="picture6">
</div>
<div class="galleryItem item7">
<img id="image7" src="http://lorempixel.com/250/200/" alt="picture7">
</div>
<div class="galleryItem item8">
<img id="image8" src="http://lorempixel.com/250/200/" alt="picture8">
</div>
<div class="galleryItem item9">
<img id="image9" src="http://lorempixel.com/250/200/" alt="picture9">
</div>
</div>

我根本不懂JS，所以不要太苛刻。

提前致谢。

Answer 1

从onload元素中删除body（使用DOMContentLoaded事件而不是干扰）。

var imageList = ["http://lorempixel.com/250/200/", "http://lorempixel.com/250/150/"],
    imageListCounter = 0,
    imageEls;

function swapImages() {
    var i = 0, len = imageEls.length;
    for (i = 0; i < len; i++) {
        imageEls[i].src = imageList[imageListCounter];
    }
    imageListCounter++;
    if (imageListCounter > imageList.length - 1) {
        imageListCounter = 0;
    }
}

document.addEventListener('DOMContentLoaded', function(event) {
    imageEls = document.querySelectorAll('.galleryItem img');
    setInterval(swapImages, 1000);
});

我们在这里做的是：

on document ready存储imageEls中的所有图像元素
然后启动一个计时器，每隔1秒调用一次swapImages
swapImages迭代图像并将.src更改为imageList
当imageListCounter到达imageList的末尾时，它将重置为0

所以完整的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple Gallery</title>
    <link rel="stylesheet" href="style.css">
    <script>
        var imageList = ["http://lorempixel.com/250/200/", "http://lorempixel.com/250/150/"],
            imageListCounter = 0,
            imageEls;

        function swapImages() {
            var i = 0, len = imageEls.length;
            for (i = 0; i < len; i++) {
                imageEls[i].src = imageList[imageListCounter];
            }
            imageListCounter++;
            if (imageListCounter > imageList.length - 1) {
                imageListCounter = 0;
            }
        }

        document.addEventListener('DOMContentLoaded', function(event) {
            imageEls = document.querySelectorAll('.galleryItem img');
            setInterval(swapImages, 1000);
        });
    </script>
</head>
<body>
    <div class="galleryWrapper">
        <div class="galleryItem item1">
            <img src="http://lorempixel.com/250/200/" alt="picture1">
        </div>
        <div class="galleryItem item2">
            <img src="http://lorempixel.com/250/200/" alt="picture2">
        </div>
        <div class="galleryItem item3">
            <img src="http://lorempixel.com/250/200/" alt="picture3">
        </div>
        <div class="galleryItem item4">
            <img src="http://lorempixel.com/250/200/" alt="picture4">
        </div>
        <div class="galleryItem item5">
            <img src="http://lorempixel.com/250/200/" alt="picture5">
        </div>
        <div class="galleryItem item6">
            <img src="http://lorempixel.com/250/200/" alt="picture6">
        </div>
        <div class="galleryItem item7">
            <img src="http://lorempixel.com/250/200/" alt="picture7">
        </div>
        <div class="galleryItem item8">
            <img src="http://lorempixel.com/250/200/" alt="picture8">
        </div>
        <div class="galleryItem item9">
            <img src="http://lorempixel.com/250/200/" alt="picture9">
        </div>
    </div>
</body>
</html>

Answer 2

如果您将图片名称设置为image1，则只需更改为'image'+i+'' document.getElementById('image'+i+'').src = images[i];

Answer 3

for (var e = 1; e < 10; e++) 
{ 
  var ImgID = 'image' + e; 
 document.getElementById(ImgID).src = images[i];
}

如果你使用的是jquery，你可以在所有的img元素上做一个foreach。但上面的方法会奏效。如果您有9张ID为image1，image2，image3的图片......那么您就明白了。

Answer 4

将此代码写入您的else块

var imgs = document.getElementsByTagName('img');
for(j=0;j<imgs.length;j++){
    imgs[j].src = images[i];  
}        
i++;

而不是

document.getElementByClassName('gallery').src = images[i];
i++;

Answer 5

为所有图像提供具有相同值的类属性。

假设您使用“imagetags”值，请将document.getElementById()行替换为以下内容：

var elements = document.GetElementsByClassName("imagetags");
for (var elem in elements){
    elements[elem].src = images[i];
}

使用JS更改计时器上的所有图像

5 个答案: