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 毫秒更改一次。