Как сделать изменяющийся по времени background

Алексей

09.05.2020

843

Содержание:

Комментарии

Не могу понять как сделать меняющийся background (не слайдер) по времени, к примеру каждые 15 секунд.
Так же вопрос через какой сервис можно прилагать куски исходного кода?

#headerwrap {
  background: url(https://images6.alphacoders.com/565/565678.jpg)
  no-repeat center top;
  margin-top: -10px;
  padding-top: 20px;
  text-align: center;
  background-attachment: relative;
  background-position: center center;
  min-height: 500px;
  width: 100%;
  background-size: 100%;
  -weblit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#headerwrap h1 {
  margin-top: 50px;
  color: white;
  font-size: 50px;
  font-weight: 300px;
  letter-spacing: 3px;
}
#headerwrap h2 {
  color: white;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie-edge">
  <meta name="description" content="B&R - комплекс умных программ-помощников в логистике.Оптимизация сегодня - конкурентное преимущество завтра" >
  <meta name="keywords" content="логистика, по для логистики, pl решения, решения в логистике, logistics, логистические решения, отправить груз, транспортировка, упаковка, как подобрать упаковку">
  <meta name="google-site-verification" content="iktT858CQzPtvqaIF2gIdC0bq2sXEe3ktoaVw6na4As" />

  <title>B&R</title>
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/formastyle.css">
  <link rel="shortcut icon" href="img/favicon.png" type="image/png">

</head>
  
  <div id="headerwrap">
    <div class="container">
      <div class="row centered">
        <div class="col-lg-8-col-lg-offset-2">
          <h1>Smart Helper</h1>
          <h2>умный помощник для 2PL</h2>

        </div>
      </div>
    </div>
  </div>

Александр Мальцев

14 мая 2020, 16:30

Для этого вам необходимо вставить следующий скрипт на страницу и поменять в нём следующие 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 мая 2020, 13:45

Большое спасибо!

Александр Мальцев

11 мая 2020, 16:51

Код можно прикладывать из любой песочницы: codepen.io, jsbin.com, jsfiddle.net и т.д.

Эту задачу можно решить как с помощью CSS анимации, так и JavaScript.

1. С помощью CSS анимации:

<style>
  @keyframes bg-сhange {
    from {
      background-image: url('/images/w-1.jpg');
    }
    20% {
      background-image: url('/images/w-2.jpg');
    }
    40% {
      background-image: url('/images/w-3.jpg');
    }
    60% {
      background-image: url('/images/w-4.jpg');
    }
    80% {
      background-image: url('/images/w-5.jpg');
    }
    to {
      background-image: url('/images/w-1.jpg');
    }
  }
  #bg {
    position: relative;
    padding-top: 75%;
    background-size: cover;
    animation: bg-сhange 20s infinite;
  }
</style>

<div id="bg"></div>

Ссылка на пример: Изменение фона элемента с помощью CSS анимации

2. С помощью JavaScript:

<div id="bg"></div>

<script>
  var bgImages = [
    '/images/w-1.jpg',
    '/images/w-2.jpg',
    '/images/w-3.jpg',
    '/images/w-4.jpg',
    '/images/w-5.jpg'
  ];
  var bgIndex = 0;
  var bgInterval = 15000; // 15 секунд
  var bgElement = document.querySelector('#bg');
  function bgChange() {
    bgElement.style.backgroundImage = 'url(' + bgImages[bgIndex] + ')';
    bgIndex++;
    if (bgIndex >= bgImages.length) {
      bgIndex = 0;
    }
  }
  bgChange();
  window.setInterval(bgChange, bgInterval);
</script>

Ссылка на пример: Изменение фона элемента с помощью JavaScript

Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.

Комментарии: