Динамическое изменение фонового изображения каждую секунду

Question

Я использую следующий код, чтобы динамически добавить строку HTML в элемент div. Я хотел бы изменить изображение каждую секунду после добавления HTML в DOM. Но мой код не работает. Где моя ошибка?

var images = ["http://pathToImg1.jpg", "http://pathToImg2.jpg"]; 

    var result = '<div class="result">'+ 
         '<a href="'+url+'" target="_blank" id="resultTitle" class="resultTitle">'+urlTitle+'</a>'+ 
         '<p id="resultDescription" style="height: 15px;">'+ 
         '<div class="resultImg" style="background-image: url('+images[0]+');"></div>'+ 
         '<span class="resultDescription" style="margin:0px 15px 0px 0;">'+description+'</span></p>'+ 
         '<p id="resultUrl" class="resultUrl">'+url+'</p>'+ 
        '</div>'; 

    $("#"+targetId).append(result); 

    var i = 0; 
    setInterval(function() { 
      var el = $(result).find(".resultImg"); 
      $(el).css('background-image', 'url("' + images[i] + '")'); 
      i = i + 1; 
      if (i == images.length) { 
      i = 0; 
      } 
    }, 1000); 

Answer 1

у вас есть ошибка есть:

var el = $(result).find(".resultImg"); 

выбор строки, содержащаяся в result переменном не даст никакого эффекта, поэтому вам нужно выбрать элемент из его родителей, который вы использовали для крепления результата.

эту линию нужно изменить следующим образом:

var el = $("#"+targetId).find(".resultImg"); 

Answer 2

$(result).find(".resultImg"); не возвращает элемент. потому что результат - это класс. Вы должны заменить его на $(".result").find(".resultImg");

Ниже приведен рабочий фрагмент.

var images = ["http://images.financialexpress.com/2015/12/Lead-image.jpg", "http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg","https://static.pexels.com/photos/50704/car-race-ferrari-racing-car-pirelli-50704.jpeg"]; 
 
var targetId = "example"; 
 

 
    var result = '<div class="result">'+ 
 
         '<a href="#" target="_blank" id="resultTitle" class="resultTitle">urlTitle</a>'+ 
 
         '<div class="resultImg" style="background-image: url('+images[0]+');"></div>'+ 
 
         '<span class="resultDescription" style="margin:0px 15px 0px 0;">description</span></p>'+ 
 
        '</div>'; 
 

 
    $("#"+targetId).append(result); 
 

 
    var i = 0; 
 
    setInterval(function() { 
 
     var el = $(".result").find(".resultImg"); 
 
      $(el).css('background-image', 'url("' + images[i] + '")'); 
 
      i = i + 1; 
 
      if (i == images.length) { 
 
      i = 0; 
 
      } 
 
    }, 1000);

#example{ 
 
    width:250px; 
 
    height:200px; 
 
    border:1px solid red; 
 
} 
 
.resultImg{ 
 
    width:150px; 
 
    height:100px; 
 
    border:1px solid green; 
 
    background-position:center; 
 
    background-size:cover; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="example"></div>

Answer 3

Проблема с var el = $(result).find(".resultImg");

result не имеют контекст как документ, он должен быть var el = $("#"+targetId).find(".resultImg");

я заменить изображение из вашего кода как цвет и использовать "#"+targetId в качестве #test, чтобы показать вам свою работу

var images = ["blue", "red"]; 
 

 
    var result = '<div class="result">'+ 
 
         '<a href="" target="_blank" id="resultTitle" class="resultTitle">Result</a>'+ 
 
         '<p id="resultDescription" style="height: 15px;">'+ 
 
         '<div class="resultImg" style="background-color: '+images[1]+';">resultImg</div>'+ 
 
         '<span class="resultDescription" style="margin:0px 15px 0px 0;">description</span></p>'+ 
 
         '<p id="resultUrl" class="resultUrl">url</p>'+ 
 
        '</div>'; 
 

 
    $("#test").append(result); 
 

 
    var i = 0; 
 
    
 
    setInterval(function() { 
 
      var el = $("#test").find(".resultImg"); 
 
      el.css('background-color', images[i]); 
 
      i = i + 1; 
 
      if (i == images.length) { 
 
      i = 0; 
 
      } 
 
    }, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test"></div>

Answer 4

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

var images = []; 
images[0] = "url of your first image"; 
images[1] = "url of your second image"; 
images[2] = "url of your third image"; 
images[3] = "url of your fourth image"; 
images[4] = "url of your fifth image"; 
images[5] = "url of your sixth image"; 

var i = 0; 
setInterval(fadeDivs, 1000); 

function fadeDivs() { 
    i = i < images.length ? i : 0; 
    console.log(i) 
    $('.product img').fadeOut(100, function(){ 
     $(this).attr('src', images[i]).fadeIn(100); 
    }) 
    i++; 
} 

Вы можете изменить время FadeIn и FADEOUT вручную. И установите время, когда изображение должно измениться. Я установил его на 1 секунду (1000 миллисекунд).