Question

我要做的是将背景图像更改17次，然后停止。当用户打开新页面时，应该发生相同的事情，加载17个图像并停止。问题是，我不太了解javascipt（我将学习我的承诺。）我找到了一个脚本，它可以工作，但我需要添加一个休息时间。我试过但没有成功。这是代码：

var imgArr = new Array(
    // relative paths of images
    'images/bgshow/1.jpg',
    'images/bgshow/2.jpg',
    'images/bgshow/3.jpg',
    'images/bgshow/4.jpg',
    'images/bgshow/5.jpg',
    'images/bgshow/6.jpg',
    'images/bgshow/7.jpg',
    'images/bgshow/8.jpg',
    'images/bgshow/9.jpg',
    'images/bgshow/10.jpg',
    'images/bgshow/11.jpg',
    'images/bgshow/12.jpg',
    'images/bgshow/13.jpg',
    'images/bgshow/14.jpg',
    'images/bgshow/15.jpg',
    'images/bgshow/16.jpg',
    'images/bgshow/17.jpg'
);

var preloadArr = new Array();
var i;

/* preload images */
for(i=0; i < imgArr.length; i++) {
    preloadArr[i] = new Image();
    preloadArr[i].src = imgArr[i];
}

var currImg = 1;
var intID = setInterval(changeImg, 150);

/* image rotator */
function changeImg() {
    $('#page-wrap').animate({opacity: 0}, 0, function() {
        $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') top center no-repeat');
    }).animate({opacity: 1}, 0);
}

非常感谢你的帮助！

Answer 1

由于150ms调用，该脚本会每隔setInterval(changeImg, 150)更改一次图片。因此，要停止它，您需要在更改完所有图像后清除间隔。这可以在changeImg功能结束时完成，添加以下内容;

function changeImg() {
  // animation code...
  if (currImg == preloadArr.length) {
    clearInterval(intID);
  }
}

Answer 2

如果（currImg == preloadArr.length）始终不clearInterval(intID); currImg == 0;

事实上; currImg++添加之前或“if (currImg++ == preloadArr.length)”

function changeImg() {
    // animation code...
    if (currImg++ == preloadArr.length) {
        clearInterval(intID);
    }
}

Javascript - 显示18张图片然后停止

2 个答案: