Javascript 以不同的时间旋转多个图像

我有三张并排的图片，左、中、右。我希望左边的第一个图像在2秒之后改变，然后中间的一个改变2秒，然后右边的一个在2秒之后改变。然后再过2秒钟，我希望左边的第一个再次改变，让序列重新开始

我将每个图像的javascript代码放在一起，使其有一个特定的开始时间，然后在再次更改之前有6秒的间隔，这就是我想要的效果

序列在第一次运行时，但是当第一个图像在第二次运行时，整个过程似乎有点僵硬，然后所有图像开始一起变化，好像它们都在相互影响。我不知道为什么会这样，因为代码分别引用了每一个。任何帮助都将不胜感激。代码如下：

HTML代码：

<div>
<img id="mainImage" src="firstimage.jpg">
<img id="mainImage1" src="secondimage.jpg">
<img id="mainImage2" src="thirdimage.jpg">
</div>

Javascript代码：

<script>
var myImage = document.getElementById("mainImage");

var imageArray = ["image1.jpg","image2.jpg","image3.jpg"];

var imageIndex = 0;

function changeImage() {
  myImage.setAttribute("src",imageArray[imageIndex]);
  imageIndex++;
  if (imageIndex >= imageArray.length) {
    imageIndex = 0;
  }
}

setTimeout(changeImage, 0000);
setInterval(changeImage,6000);
</script>

<script>
var myImage1 = document.getElementById("mainImage1");

var imageArray1 = ["image4.jpg","image5.jpg","image6.jpg"];

var imageIndex1 = 0;

function changeImage1() {
  myImage1.setAttribute("src",imageArray1[imageIndex1]);
  imageIndex1++;
  if (imageIndex1 >= imageArray1.length) {
    imageIndex1 = 0;
  }
}

setTimeout(changeImage1, 2000);
setInterval(changeImage1,6000);
</script>

<script>
var myImage2 = document.getElementById("mainImage2");

var imageArray2 = ["image7.jpg","image8.jpg","image9.jpg"];

var imageIndex2 = 0;

function changeImage2() {
  myImage2.setAttribute("src",imageArray2[imageIndex2]);
  imageIndex2++;
  if (imageIndex2 >= imageArray2.length) {
    imageIndex2 = 0;
  }
}

setTimeout(changeImage2, 4000);
setInterval(changeImage2,6000);

</script>

var myImage=document.getElementById（“mainImage”）；
var imageArray=[“image1.jpg”、“image2.jpg”、“image3.jpg”]；
var指数=0；
函数changeImage（）{
setAttribute（“src”，imageArray[imageIndex]）；
imageIndex++；
如果（imageIndex>=imageArray.length）{
imageIndex=0；
}
}
设置超时（changeImage，0000）；
设置间隔（changeImage，6000）；
var myImage1=document.getElementById（“mainImage1”）；
var imageArray1=[“image4.jpg”、“image5.jpg”、“image6.jpg”]；
var imageIndex1=0；
函数changeImage1（）{
myImage1.setAttribute（“src”，imageArray1[imageIndex1]）；
imageIndex1++；
如果（imageIndex1>=imageArray1.长度）{
imageIndex1=0；
}
}
设置超时（ChangeImage12000）；
设置间隔（ChangeImage16000）；
var myImage2=document.getElementById（“mainImage2”）；
var imageArray2=[“image7.jpg”、“image8.jpg”、“image9.jpg”]；
var imageIndex2=0；
函数changeImage2（）{
myImage2.setAttribute（“src”，imageArray2[imageIndex2]）；
imageIndex2++；
if（imageIndex2>=imageArray2.长度）{
imageIndex2=0；
}
}
设置超时（ChangeImage2400）；
设置间隔（ChangeImage26000）；

解决方案：

每人

setTimeout(changeImage2, x);
setInterval(changeImage2,6000);

改为

setTimeout(function() {
   setInterval(changeImage2,6000);
}, x);

请点击此处：

说明：

---

setTimeout（）

不会使运行时在特定时间内处于睡眠状态。它只需设置一个计时器，在特定时间后执行上述功能。因此，在您的实现中，所有

setInterval（）

调用几乎同时执行。我只是在

setTimeout

函数中设置间隔，以便这些

setInterval（）

调用在不同的时间执行。

太好了，非常感谢。它适用于前3个图像，但当我在另一个div的下面添加另外5个图像时，时间会增加（setTimeout（function（）{setInterval（changeimage36000）；}，6000）；setTimeout（function（）{setInterval（changeimage46000）；}，8000）；）等，所有后续图像都会一起更改，而不是按顺序更改。我必须更仔细地看一看，可能我遗漏了一些简单的东西，但我读到setTimeout或setInterval中的最大设置4000存在一些问题，可能是某些默认设置导致了这一点吗？我从未听说过最大设置4000。请再试一次，也许你遗漏了什么。不过有一个建议，如果您有多个相同类型的div，最好将它们的信息存储在一个数组中，并在它们上面循环函数，而不是为每个div编写相同的代码。