it-swarm.com.ru

Как изменить фоновое изображение каждые X секунд?

У меня есть div, который заполняет всю страницу (стиль портфолио). div имеет такой стиль:

.image-head {
  background: url('http://placehold.it/1920x1080') no-repeat top center fixed;
  background-size: cover;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  color: black;
  text-align: center;
}

По сути, я хочу, чтобы каждые X секунд менялись url, на который div указывает его фоновое изображение, но я не уверен, как это сделать.

Моя разметка в настоящее время выглядит так:

<div class="image-head">
  <div class="centering-hack">
    <h1>Something HTML</h1>
  </div>
</div>

Какое самое простое/лучшее решение здесь?

Спасибо!

Правка: я использую Bootstrap 3, если библиотека JS делает что-нибудь проще

7
Brennan Macaig

Создайте массив с изображениями, которые вы хотите использовать: 

var images = [
  "https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx",
  "https://www.petfinder.com/wp-content/uploads/2013/09/cat-black-superstitious-fcs-cat-myths-162286659.jpg",
  "https://upload.wikimedia.org/wikipedia/commons/4/4d/Cat_March_2010-1.jpg"
]

Мы получаем div, фон которого вы хотите изменить:

var imageHead = document.getElementById("image-head");

Теперь вы можете использовать setInterval для изменения URL фонового изображения каждую секунду (или любой другой интервал времени):

var i = 0;
setInterval(function() {
      imageHead.style.backgroundImage = "url(" + images[i] + ")";
      i = i + 1;
      if (i == images.length) {
        i =  0;
      }
}, 1000);

Вот живой пример: https://jsfiddle.net/vvwcfkfr/1/

Некоторые улучшения с использованием функционального программирования, ES6 и рекурсивности:

const cats = [
  "https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx",
  "https://www.petfinder.com/wp-content/uploads/2013/09/cat-black-superstitious-fcs-cat-myths-162286659.jpg",
  "https://upload.wikimedia.org/wikipedia/commons/4/4d/Cat_March_2010-1.jpg"
]

const node = document.getElementById("image-head");

const cycleImages = (images, container, step) => {
    images.forEach((image, index) => (
    setTimeout(() => {
        container.style.backgroundImage = `url(${image})`  
    }, step * (index + 1))
  ))
  setTimeout(() => cycleImages(images, container, step), step * images.length)
}

cycleImages(cats, node, 1000)

https://jsfiddle.net/du2parwq/

8
Fausto NA

Если я решу недооценить вашу проблему, вы захотите что-то вроде http://codepen.io/dodekx/pen/BKEbPK?editors=1111

var url = ['http://lorempixel.com/400/200/sports/' ,
        'http://lorempixel.com/400/200/city/'];
curentImageIndex = 0;
setInterval(function(){ 
 console.log(url[curentImageIndex])
 var p = $('.image-head');
  p.css("background","url("+url[curentImageIndex++] + ")");
  if(curentImageIndex>= url.length){curentImageIndex = 0}
 }, 1000);

Конечно, лучшее решение - это jumbutron из jquery plugin или boostrap.

1
Dominik Kajzar