Question

我的HTML：

<img src="C:\Users\Shady\Downloads\restaurant\food1.jpg" alt="rotating image" width="400" height="300" id="rotator">

我的Javascript：

<script type="text/javascript">
        (function() {
            var rotator = document.getElementById('rotator');  
            var imageDir = 'C:\\Users\\Shady\\Downloads\\restaurant\\';                          
            var delayInSeconds = 5;                            

            var images = ['food1.jpg', 'food2.jpg', 'food3.jpg', 'food4.jpg', 'food5.jpg', 'food6.jpg', 'food7.jpg', 'food8.jpg'];

            var num = 0;
            var changeImage = function() {
                var len = images.length;
                rotator.src = imageDir + images[num++];
                if (num == len) {
                    num = 0;
                }
            };
            setInterval(changeImage, delayInSeconds * 1000);
        })();
        </script>

一切都对我有意义，但由于某种原因，它不起作用。它只显示第一张图片（不在图片中循环）。如果您还有其他需要，请告诉我。谢谢。

Answer 1

在加载文档之前，您正在获取元素'旋转器'，因此它不存在。

试试这个：

function start() {
    var rotator = document.getElementById('rotator');  
    var imageDir = 'C:\\Users\\Shady\\Downloads\\restaurant\\';                          
    var delayInSeconds = 1;                            

    var images = ['food1.jpg', 'food2.jpg', 'food3.jpg', 'food4.jpg', 'food5.jpg', 'food6.jpg', 'food7.jpg', 'food8.jpg'];

    var num = 0;
    var changeImage = function() {
        var len = images.length;
        rotator.src = imageDir + images[num++];
        if (num == len) {
            num = 0;
        }
    };
    setInterval(changeImage, delayInSeconds * 1000);
};
window.onload=function(){
start();
}

Answer 2

这是你可以试试的......它对我来说很好....

<html>
<body>
<img src="file:///C:/Users/Public/Pictures/Sample%20Pictures/test1 (2).jpg" alt="rotating image" width="400" height="300" id="rotator"> 
<script type="text/javascript">
    (function() {
        var rotator = document.getElementById('rotator');  
        var imageDir = 'file:///C:/Users/Public/Pictures/Sample%20Pictures/';                         
        var delayInSeconds = 5;                            

        var images = ['test1.jpg', 'test1 (2).jpg', 'test1 (3).jpg', 'test1 (4).jpg', 'test1 (5).jpg', 'test1 (6).jpg', 'test1 (7).jpg', 'test1 (8).jpg'];

        var num = 0;
        var changeImage = function() {
            var len = images.length;
            rotator.src = imageDir + images[num++];
            if (num == len) {
                num = 0;
            }
        };
        setInterval(changeImage, delayInSeconds * 100);
    })();
    </script>   
</body> 
</html>

Answer 3

预加载图片：

<script type="text/javascript">

var slideimages = new Array() // create new array to preload images
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "firstcar.gif" // set image src property to image path, preloading image in the process
slideimages[1] = new Image()
slideimages[1].src = "secondcar.gif"
slideimages[2] = new Image()
slideimages[2].src = "thirdcar.gif"

</script>

显示第一张图片：

<img src="firstcar.gif" id="slide" width="100" height="56" />

制作幻灯片（循环）：

<script type="text/javascript">

//variable that will increment through the images
var step=0

function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src
if (step<2)
step++
else
step=0
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}

slideit()

</script>

Answer 4

在加载之前，您尝试访问标识为rotator的DOM元素。有两种方法可以绕过这个问题：

您可以将script标记移到img标记下方，因为javascript get在加载img元素后执行：

<img src="C:\Users\Shady\Downloads\restaurant\food1.jpg" alt="rotating image" width="400" height="300" id="rotator">
<script type="text/javascript">
    (function() {
        var rotator = document.getElementById('rotator');  
        var imageDir = 'C:\\Users\\Shady\\Downloads\\restaurant\\';                          
        var delayInSeconds = 5;                            

        var images = ['food1.jpg', 'food2.jpg', 'food3.jpg', 'food4.jpg', 'food5.jpg', 'food6.jpg', 'food7.jpg', 'food8.jpg'];

        var num = 0;
        var changeImage = function() {
            var len = images.length;
            rotator.src = imageDir + images[num++];
            if (num == len) {
                num = 0;
            }
        };
        setInterval(changeImage, delayInSeconds * 1000);
    })();
</script>

您可以将文档的onload事件处理程序设置为您的匿名函数（或者如果您愿意，可以为其命名）：

<script type="text/javascript">
window.onload = function() {
    var rotator = document.getElementById('rotator');  
    var imageDir = 'C:\\Users\\Shady\\Downloads\\restaurant\\';                          
    var delayInSeconds = 5;                            

    var images = ['food1.jpg', 'food2.jpg', 'food3.jpg', 'food4.jpg', 'food5.jpg', 'food6.jpg', 'food7.jpg', 'food8.jpg'];

    var num = 0;
    var changeImage = function() {
        var len = images.length;
        rotator.src = imageDir + images[num++];
        if (num == len) {
            num = 0;
        }
    };
    setInterval(changeImage, delayInSeconds * 1000);
};
</script>

如何在JavaScript中循环播放图片？

4 个答案: