Question

我并排有三个图像，分别是左，中和右。我希望左侧的第一张图片在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>

Answer 1

解决方案：

对于每个

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

更改为

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

在这里检查：https://jsfiddle.net/bstd3fqu/4/

说明：

setTimeout()不会使运行时在特定时间内进入睡眠状态。它只是设置了一个计时器，以便在一定时间后执行上述功能。因此，所有setInterval()调用在您的实现中几乎同时执行。我只是在setTimeout函数中设置间隔，以使这些setInterval()调用在不同的时间执行。

以不同的定时旋转几张图像

1 个答案: