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 に答える