JavaScript中循环一系列图像

Question

JavaScript中循环一系列图像

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>

- Eric

旋转是否意味着更换图像？
你提供的文件夹路径正确吗？我在代码中没有看到。

- sree

我把HTML文件和代码放在一起，所以不需要路径，对吧？@Joseph，它只显示第一张图片，第二张图片无法显示。 - Eric

3个回答

0

据我所知，如果您尝试同时显示所有10000张图片，浏览器会崩溃，因此您可以使用相同的逻辑以小块显示图像。因此，请在页面上显示5-10张图片，并要求用户检索下一组。您可以在许多图片共享应用程序中看到这种实现方式。希望这会对您有所帮助。

- UVM

1

我正在编写一个程序，它可以自动以快速的速度显示图像，实际上类似于视频。 - Eric

我认为它不会存储在浏览器中，它只是用于显示一系列图像而已。 - Eric

这些10000张图片都存储在机器内部。所以我只需调用它们并显示即可。 - Eric

你只使用JavaScript吗？因为JavaScript仅在客户端浏览器上运行。所以你需要将这些图像下载到客户端浏览器中。但问题是，你如何实现这一点呢？ - UVM

我将拥有一个服务器，它将捕获屏幕并发送给客户端。因此，我不必担心图像部分。 - Eric

显示剩余2条评论

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);

})();

- Jean-Joseph

尝试这个。不需要使用数组，只需在dir中使用num递增即可。您将需要指定img限制。 - Jean-Joseph

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joseph · Accepted Answer

假设图片具有相同的顺序文件名，这种方法在循环处理大量图片时效果最佳：

(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);
}());