javascript - 如何在 JavaScript 中循环浏览图片？

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

您在加载文档之前获取元素“rotator”，因此它不存在。

试试这个:

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