Не могу понять как сделать меняющийся background (не слайдер) по времени, к примеру каждые 15 секунд.
Так же вопрос через какой сервис можно прилагать куски исходного кода?
Если статья понравилась, то поделитесь ей в социальных сетях:
Комментарии: 4
Алексей
13.05.2020, 20:09
Не совсем понял, как Ваши куски кода вставить в мой.
CSS:
Для этого вам необходимо вставить следующий скрипт на страницу и поменять в нём следующие 2 момента. Это:
1. Поместить в bgImages URL к фонам через запятую.
2. Указать селектор для выбора элемента у которого нужно изменять background.
<script>
// 1. Добавить в массив bgImages URL к фонам
var bgImages = [
'https://images6.alphacoders.com/565/565678.jpg',
...
];
var bgIndex = 0;
var bgInterval = 15000; // 15 секунд
// 2. Выбрать элемент у которого нужно изменять background
var bgElement = document.querySelector('#headerwrap');
function bgChange() {
bgElement.style.backgroundImage = 'url(' + bgImages[bgIndex] + ')';
bgIndex++;
if (bgIndex >= bgImages.length) {
bgIndex = 0;
}
}
bgChange();
window.setInterval(bgChange, bgInterval);
</script>
Алексей
12.05.2020, 13:45
Большое спасибо!
Александр Мальцев
11.05.2020, 16:51
Код можно прикладывать из любой песочницы: codepen.io, jsbin.com, jsfiddle.net и т.д.
Эту задачу можно решить как с помощью CSS анимации, так и JavaScript.
CSS:
HTML:
1. Поместить в bgImages URL к фонам через запятую.
2. Указать селектор для выбора элемента у которого нужно изменять background.
Эту задачу можно решить как с помощью CSS анимации, так и JavaScript.
1. С помощью CSS анимации:
Ссылка на пример: Изменение фона элемента с помощью CSS анимации
2. С помощью JavaScript:
Ссылка на пример: Изменение фона элемента с помощью JavaScript