Fatal编程技术网
  • javascript/
  • Javascript 使用JS更改计时器上的所有图像

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

javascript image

Javascript 使用JS更改计时器上的所有图像,javascript,image,Javascript,Image,我有这个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 { docu

我有这个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>


变量图像=[”http://lorempixel.com/250/200/", "http://lorempixel.com/250/150/"];
var i=0；
var renew=setInterval（函数（）{
如果（images.length==i）{
i=0；
}
否则{
document.getElementByClassName（'galleryItem'）.src=images[i]；
i++；
}
},1000);
我根本不懂JS，所以不要太苛刻

提前感谢。

如果您将图像名称设置为
image1
，您只需更改为
'image'+i+'
document.getElementById（'image'+i+''）.src=images[i]
用于（变量e=1；e<10；e++）

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


{ 
var ImgID='image'+e；
document.getElementById（ImgID）.src=images[i]；
}



如果您使用jquery，您可以对所有img元素执行foreach。但上述措施将奏效。如果您有9个ID为image1、image2、image3的图像。。。你明白了。
在else块中编写此代码


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



为所有图像指定一个具有相同值的class属性

假设使用值“imagetags”，则将
document.getElementById（）
行替换为以下内容：


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



从
body
元素中删除
onload
（改为使用DOMContentLoaded事件，它的干扰性更小）


var-imageList=[”http://lorempixel.com/250/200/", "http://lorempixel.com/250/150/"],
imageListCounter=0，
Imagels；
函数swapImages（）{
var i=0，len=imageEls.length；
对于（i=0；iimageList.length-1）{
imageListCounter=0；
}
}
document.addEventListener（'DOMContentLoaded'，函数（事件）{
imageEls=document.queryselectoral（'.galleryItem img'）；
设定间隔（swapImages，1000）；
});


我们在这里所做的是：


    

  • 在文档就绪状态下，将所有图像元素存储在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>




简单画廊
var imageList=[”http://lorempixel.com/250/200/", "http://lorempixel.com/250/150/"],
imageListCounter=0，
Imagels；
函数swapImages（）{
var i=0，len=imageEls.length；
对于（i=0；iimageList.length-1）{
imageListCounter=0；
}
}
document.addEventListener（'DOMContentLoaded'，函数（事件）{
imageEls=document.queryselectoral（'.galleryItem img'）；
设定间隔（swapImages，1000）；
});

我建议使用
document.getElementsByClassName（'galleryItem'）
并在它们之间循环，而不是按ID进行选择，除非您想将它们更改为不同的图像。在问题中始终包括相关的代码和标记，而不仅仅是链接（甚至连到fiddle/jsbin都没有）。链接腐烂了，人们不应该去非现场帮助你。谢谢你的更正。我编辑了请求，所以现在应该可以了。

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);
});



<!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>