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

当您将start设置为0时，由于尚未为图像源分配值，因此您为轮播的该次迭代将图像的源设置为undefined。

请考虑使用模数选择要显示的图片。

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

那将是您整个轮播功能。

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

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

将perform from allplaces where visittime is null and person = 'me' and place = 'this' and ...otherconditions...; if (FOUND) then update allplaces set visittime = null where person = 'me'; update allplaces set visittime = now() where person = 'me' and place = 'this' and ...otherconditions...; return true; else return false; end if;等于6重置为零。这基本上可以看作是具有6的mod。您的代码可以简化为以下内容

start

Answer 4

您的循环只会在第一次出现时起作用。这是因为第一次start = 1。但是在start = 5之后，它又回到start = 0。由于没有start = 0的条件，因此它也将进入else，并且之后总是进入else。因此，它将无法在第二次运行中运行，并且每次您运行该函数时都需要重置image_data变量。如果您设置start = 1而不是start = 0，则应该可以使用。像这样：

else {
    start = 1
}

使用setInterval

4 个答案: