HTML / CSS: несколько последовательных полноэкранных изображений

Question

HTML / CSS: несколько последовательных полноэкранных изображений

0

Какой лучший способ получить несколько последовательных полноэкранных изображений, которые вы можете пролистывать на одном веб-сайте?

В настоящее время у меня есть только одно изображение, используя следующий код:

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

Sebastian 26 сен. 2013, в 20:48

Источник

Теги:

html

css

html5

css3

fullscreen

1 ответ

Ещё вопросы

Zach Saucier · Answer 1 · 2013-09-26T17-06-00.000Z

Что-то вроде этого будет работать с помощью небольшого 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>

Демо здесь

Вообще говоря, вы должны применить фон к телу вместо элемента HTML

Любопытно, почему вы говорите применить фон к body над элементом html ?
Потому что в моей демонстрации это выдает ошибку, когда я применил его непосредственно к элементу HTML, и потому что чаще применяется его к телу