6

JavaScriptで一連の画像をループしたい。以下は私がこれまでに持っているコードです

<html>
<head>
</head>

<body>
<img src="images/image1.jpg" alt="rotating image" width="600" height="500" id="rotator">

<script type="text/javascript">
(function() {
var rotator = document.getElementById('rotator');  // change to match image ID
//var imageDir = 'images/';                          // change to match images folder
var delayInSeconds = 1;                            // set number of seconds delay
// list image names
var images = ['1.jpg','2.jpg', '3.jpg', '4.jpg'];

// don't change below this line
var num = 0;
var changeImage = function() {
    var len = images.length;
    rotator.src = images[num++];
    if (num == len) {
        num = 0;
    }
};
setInterval(changeImage, delayInSeconds * 50);
})();
</script>
</body>
</html>

「varimage」で宣言した画像のみを表示できます。私が10000の画像を持っている場合、それを行う方法。'for'ループを使用しようとしましたが、失敗しました..何か提案はありますか?? 前もって感謝します

================================================== ============

ジョセフが推奨するアップデートバージョン：

<html>
<head>
</head>

<body>
<img src="images/1.jpg" alt="rotating image" width="600" height="500" id="rotator">

<script type="text/javascript">
(function() {
var rotator = document.getElementById('rotator'), //get the element
   var delayInSeconds = 1,                           //delay in seconds
   var num = 0,                                      //start number
   var len = 9999;                                      //limit
setInterval(function(){                           //interval changer
    num = (num === len) ? 0 : num;                //reset if limit reached
    rotator.src = num + '.jpg';                     //change picture
    num++;                                        //increment counter
}, delayInSeconds * 1000);
}());
</script>
</body>
</html>
4

3 に答える 3

4

画像のファイル名が同じであると仮定すると、多くの画像をループする場合に最適です。

(function() {
    var rotator = document.getElementById('rotator'), //get the element
        dir = 'images/',                              //images folder
        delayInSeconds = 1,                           //delay in seconds
        num = 0,                                      //start number
        len = N;                                      //limit
    setInterval(function(){                           //interval changer
        rotator.src = dir + num+'.jpg';               //change picture
        num = (num === len) ? 0 : ++num;              //reset if last image reached
    }, delayInSeconds * 50);
}());
于 2012-05-15T06:09:01.430 に答える
0

AFAIK、10000枚すべての画像を同時に表示しようとするとブラウザがクラッシュするのと同じロジックを使用して、画像を小さなチャンクで表示できます。現在のロジックでページに5〜10枚の画像を表示し、ユーザーに確認してください次のセットを取得します。この種の実装は、多くの画像共有アプリケーションで確認できます。これがお役に立てば幸いです。

于 2012-05-15T06:15:07.183 に答える
0 
(function () {
var rotator = document.getElementById('rotator');  // change to match image ID
var imgDir = 'images/';          // change to match images folder
var delayInSeconds = 1;                         // set number of seconds delay    

// Yes I made changes below this line
var num = 0;
var changeImage = function () {
    rotator.src = imgDir + num++ + ".jpg";
    //var len = rotator.src.length;
    if (num == 5) {
        num = 0;
    }
};
setInterval(changeImage, delayInSeconds * 1000);

}）（）;

于 2021-10-24T17:08:03.147 に答える