Цикл css стола

Question

Эй, мне просто интересно, как прокрутить кучу изображений и установить их в качестве фона для div.

Я хочу сделать следующее: установить первое изображение в качестве фона для div. Подожди Х секунд. Установите следующее изображение в качестве фона. Подождите Х секунд ... и т. Д. И продолжайте

У меня есть следующий код, который работает для 1 изображения.

$(document).ready(function() {
  var source = $(".field-field-background img:first").attr("src");
  $('.field-field-background img:first').remove();
  $('#main-inner').css('background', 'url('+ source +') no-repeat');
});

Полагаю, мне нужно получить массив источников изображений, пройтись по массиву и установить его в качестве фона с задержкой где-то в цикле. Есть идеи, как мне это сделать?

Answer 1

Одним из самых больших преимуществ jQuery является то, что у него есть очень надежное сообщество плагинов . Многие задачи, которые вы, возможно, захотите выполнить, были решены другими перед вами. В частности, для решения такой общей задачи я бы рекомендовал сначала поискать плагин, прежде чем пытаться изобретать велосипед. Преимущество многих плагинов состоит в том, что они прошли тщательное тестирование и несколько версий, что привело к получению качественного продукта.

Плагин jQuery Cycle будет хорошим кандидатом, если вы хотите сделать эффект типа слайд-шоу. Если вам нужно циклически перемещать фон, сохраняя элементы переднего плана, вы можете посмотреть что-то более похожее на это: Расширенное слайд-шоу фоновых изображений jQuery

Answer 2

попробуйте это:

setInterval(function(){
    var source = $(".field-field-background img:first").attr("src");
    $('.field-field-background img:first').remove();
    $('#main-inner').css('background', 'url('+ source +') no-repeat');
},4000);

Answer 3

$(document).ready(function() {
  Cycler={};
  Cycler.src=['path/to/img1', 'path/to/img2', 'path/to/img3'];
  Cycler.cur=0;
  Cycler.cycle=function() {
    if(++Cycler.cur>=Cycler.src.length) {
      Cycler.cur=0;
    }

    $('#main-inner').css('background', 'url('+ Cycler.src[Cycler.cur] +') no-repeat');
    setTimeout(Cycler.cycle, 5000);//5 seconds
  }

  Cycler.cycle();
});