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

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

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

  1. Алексей
    Алексей
    13.05.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.05.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.05.2020, 13:45
    Большое спасибо!
  3. Александр Мальцев
    Александр Мальцев
    11.05.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