时间戳

首页 > 解决方案 > 使用 setInterval 制作图像轮播

javascript - 使用 setInterval 制作图像轮播

问题描述

我正在使用 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>

标签： javascriptif-statementcarouselsetinterval

解决方案

当您将 start 设置为 0 时，对于轮播的该迭代，您将图像的源设置为未定义，因为您尚未为图像源分配值。

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

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

或者：您可以调用您的方法并在将 start 设置为 0 时返回：

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

那将是您的整个轮播功能。

这样，您以后可以轻松地添加更多图像，而无需过多地修改您的功能。您所要做的就是列出您在数组中显示的文件，然后一切就绪。

推荐阅读