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>

它只能显示我在“var image”中声明的图像。如果我有 10000 张图片，该怎么做。我试过使用'for'循环，但失败了..有什么建议吗？？提前致谢

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

Joseph 推荐的更新版本：

<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 回答