jquery - 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++
  }
}