使用setInterval制作图像旋转木马

Question

我正在使用setInterval制作映像旋转木马，以及if语句和图像显示正常。

<img src="images/img1.jpg" id="images">
<script>
var start = 1;
var timer = setInterval(carousel, 1000);
  function carousel(){
    var image_data;
    if (start==1) {
      image_data="images/img1.jpg";
    }else if (start==2) {
      image_data="images/img2.jpg";
    }else if (start==3) {
      image_data="images/img3.jpg";
    }else if (start==4) {
      image_data="images/img4.jpg";
    }else if (start==5) {
      image_data="images/img5.jpg";
    }else {
      start = 0;
    }
    document.getElementById('images').src=""+ image_data;
    start++;
  }
</script>

Answer 1

设置为0时，您将图像源设置为未定义的旋转木马的迭代，因为您尚未将值分配给图像源。

而是考虑使用模量选择要显示的图片。

// initially, start = 0
if (start % numImages === 0) {
  // display image 1
}
else if (start % numImages === 1) {
   // display image 2
}

或：您可以调用您的方法并在设置开始时返回：

start = 1;
carousel();
return;

但是，对于更可维护的解决方案，您可能需要这样做：

const images = [ 'images/image1.jpg', ... ];
const currImage = images[ start % images.length ];
document.getElementById('images').src = currImage;
start++;
// This part is optional, it's unlikely a user would be on the page long enough
// for start to overflow
if (start === images.length) {
  start = 0;
}

那将是您的整个旋转木马功能。

这样，您可以在以后轻松添加更多图像，而不会过多地修改功能。您要做的就是列出您在数组中显示的文件，然后将所有设置。

Answer 2

那是因为当开始到5＆amp;您使用第五张图像，然后在功能末尾增加到6。然后，下一次，您在if语句的级联中找不到所需的值，因此您最终将IMG URL设置为" null"一词。由于您的所有图像都具有相同的格式，除了数字外，您可以摆脱IF级联，然后将SRC设置为'images/img' + start + '.jpg'。然后，您要做的就是在设置它之前，请确保它没有像这样的最大图像索引：

：

if (start>5) {start=1;}

然后在设置IMG的来源后，递增计数器。

如果您的图像不是真正的会被索引，那么您可以将URL存储在数组中，＆amp;将计数器用作该数组的索引，然后在增量时检查索引保持< array.length。

Answer 3

当等于6时，将start重置为零。这基本上可以将其视为Mod。

<script>
var start = 1;
var timer = setInterval(carousel, 1000);
  function carousel(){
    var image_data; 
    start =  start % 6;
    image_data = "images/img" +start+ ".jpg";
    document.getElementById('images').src=""+ image_data;
    start++;
  }
</script>