Слайд-шоу фонового изображения в Js (& HTML, CSS) - PullRequest
Новая
       72

Слайд-шоу фонового изображения в Js (& HTML, CSS)

0 голосов
/ 09 июля 2020

Я пытаюсь реализовать на своем веб-сайте простое слайд-шоу с фоновыми изображениями, но не могу найти хорошего учебника по inte rnet, поэтому решил спросить здесь.

HTML : 

<body>
   <h3>Welcome!</h1>
   <p>Lorem ipsum dolor sit amet</p>
</body>

JS: 

var i = 0;
var images = [];
var slideTime = 3000; // 3 seconds

images[0] = '/img/bg1.jpg';
images[1] = '/img/bg2.jpg';
images[2] = '/img/bg3.jpg';

function changePicture() {
    document.body.style.backgroundImage = images[i];

    if (i < images.length - 1) {
        i++;
    } else {
        i = 0;
    }

    setTimeout("changePicture()", slideTime);
}

window.onload = changePicture;

CSS: 

body {
    background-image: url("img/bg2.jpg");
    background-position: center;
    background-size: cover;
}

1 Ответ

1 голос
/ 09 июля 2020

Фоновому изображению требуется URL-адрес для обертывания файла изображения при передаче файла изображения. 

var i = 0;
var images = [];
var slideTime = 3000; // 3 seconds

images[0] = 'https://via.placeholder.com/150/300AAA';
images[1] = 'https://via.placeholder.com/150/000300';
images[2] = 'https://via.placeholder.com/150/AAA300';

function changePicture() {
    document.body.style.backgroundImage = "url(" + images[i] + ")";

    if (i < images.length - 1) {
        i++;
    } else {
        i = 0;
    }
    setTimeout(changePicture, slideTime);
}

window.onload = changePicture;
body {
    background-image: url("https://via.placeholder.com/150/300AAA");
    background-position: center;
    background-size: cover;
}
<h3>Welcome!</h3>
   <p>Lorem ipsum dolor sit amet</p>
...