使用 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 时，您将轮播的那次迭代的图像源设置为未定义，因为您还没有为图像源分配值。

相反，考虑使用模数 select 要显示的图片。

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

或者：您可以在将开始设置为 0 时调用您的方法和 return：

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

那是因为当 start 达到 5 并且您使用第 5 个图像时，然后您在函数结束时递增到 6。然后下一次，你没有在你的 if 语句级联中找到需要的值，所以你最终将 img url 设置为单词 "null"。由于除了数字之外所有图像都具有相同的格式，因此您可以摆脱 if 级联并将 src 设置为 'images/img' + start + '.jpg'。然后你所要做的就是在你设置它之前，确保它没有像这样超过你最大的图像索引：

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

然后在设置 img 的来源后，增加计数器。

如果您的图像真的不会像那样被编入索引，那么您可以将 URL 存储在一个数组中，并使用计数器作为该数组的索引并在递增时检查索引是否保持 < array.length。

Answer 3

当start等于6时，你把它重置为零。这基本上可以看作是一个mod加6。你的代码可以简化为如下

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

使用 setInterval 制作图像轮播

Making an Image carousel using setInterval

javascript

if-statement

setinterval

carousel