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

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

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

  1. Алексей
    Алексей
    2020-05-13 20:09:58
    Не совсем понял, как Ваши куски кода вставить в мой.
    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. Александр Мальцев
    Александр Мальцев
    2020-05-14 16:30:43
    Для этого вам необходимо вставить следующий скрипт на страницу и поменять в нём следующие 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>
  • Алексей
    Алексей
    2020-05-12 13:45:15
    Большое спасибо!
    1. Александр Мальцев
      Александр Мальцев
      2020-05-11 16:51:23
      Код можно прикладывать из любой песочницы: 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