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

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

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

  1. Алексей
    13 мая 2020, 20:09
    Не совсем понял, как Ваши куски кода вставить в мой.
    CSS:
    #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>
    
    1. Александр Мальцев
      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>
    2. Алексей
      12 мая 2020, 13:45
      Большое спасибо!
      1. Александр Мальцев
        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
        Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.