1

我想要做的是改变背景图像 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);
}

非常感谢您的帮助！

4

2 回答 2

1

150ms由于setInterval(changeImg, 150)调用，该脚本将不断更改图像。因此，要停止它，您需要在更改完所有图像后清除间隔。这可以在changeImg函数末尾完成，添加以下内容；

function changeImg() {
  // animation code...
  if (currImg == preloadArr.length) {
    clearInterval(intID);
  }
}
于 2012-08-15T13:27:18.593 回答
0

if ( currImg == preloadArr.length) 并不clearInterval(intID);总是运行currImg == 0;

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

function changeImg() {
    // animation code...
    if (currImg++ == preloadArr.length) {
        clearInterval(intID);
    }
}
于 2012-08-15T14:23:18.543 回答