Question

获得几个可以在一个网站上滚动的连续全屏图像的最佳方法是什么？

我目前只有一个图像使用以下代码：

html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Answer 1

这样的东西可以使用一点点javascript

<script type="text/javascript">
var arr = ["imgurlone.jpg", "imgurltwo.jpg", "imgurlthree.jpg"];
var i = 0;
setInterval(function() {
    if(i+1 < arr.length + 1)
    {
        i++;
        document.body.style.background = "url(" + arr[i] + ") no-repeat center center fixed";
    }
    else {
        i = 0;
        document.body.style.background = "url(" + arr[i] + ")";
    }
}, 10000); // Runs every 10,000 ms or every 10 seconds
</script>

Demo Here

一般来说，您应该将背景应用于正文而不是HTML元素

HTML / CSS：多个连续的全屏图像

1 个答案: