HTML5循环中的多个图像

Question

我有一个加载单个图像的html5页面。但我的要求是在循环中一个接一个地显示多个图像。请提供您的建议..

Answer 1

请尝试以下代码：

<div id="slider"></div>

<style>
    #slider {
        width: 600px;
        height: 300px;
        background-image: url("img/slide0.jpg");
        background-size: cover;
    }
</style>

<script>
    window.onload = function start() {
        slide();
    }

    function slide() {
        var num = 0, style = document.getElementById('slider').style;
        window.setInterval(function () {
            // increase by num 1, reset to 0
            num = (num + 1) % 9;
            console.log(num);
            style.backgroundImage = "url('img/slide" + num + ".jpg')";
        }, 2000); // repeat forever, polling every x milliseconds
    }

</script>

将图像存储在适当的文件夹中，并调整计算num的图像计数。目前它已设置为9张图像。

调整setInterval函数末尾的时间。目前，图像每2000毫秒更换一次。