jQuery clearInterval 可以保留 jQuery 设置的背景图像吗?

Question

我在CSS中有一个图像作为背景图像。我正在循环浏览三张图片。最后一个是我在循环浏览它们后想要保留的内容，如何保留最后一个图像并清除间隔？或者有没有更好的方法来编写没有setInterval的jQuery？

我知道这些东西足够多，会惹上麻烦。感谢您的帮助！

#top {
    width: 100vw;
    background-image: url("/sites/default/files/pictures/hero_image12.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
}

然后我使用这个jQuery来运行图像。

var imageArray = [
  '/sites/default/files/pictures/hero_image12.png',
  '/sites/default/files/pictures/hero_image_2.jpg',
  '/sites/default/files/pictures/hero_image_3.jpg'
]
var itemInterval = 6000,
  numberOfItems = 3,
  currentItem = 1;
function changeImage() {
  $('#top').css('background-image', 'url(' + imageArray[currentItem] + ')');
  if (currentItem === numberOfItems - 1) {
    currentItem = 0;
  } else {
    currentItem++
  }
}
var slide = setInterval(function() {
  changeImage();
}, itemInterval)

Answer 1

更改if，以便它不会在到达末尾时将currentItem设置回0，而是简单地清除间隔。

function changeImage() {
  $('#top').css('background-image', 'url(' + imageArray[currentItem] + ')');
  if (currentItem === numberOfItems - 1) {
    clearInterval(slide);
  } else {
    currentItem++
  }
}