Change background-image dynamically every second

Question

I use the following code to add dynamically HTML string to a div element. I would like to change the image every second after added HTML to the DOM. But my code doesn't work. Where is my mistake?

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

you've got an error there:

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

selecting a string contained in a result variable will give you no effect, so you need to select element from it's parent which you used for attaching result to.

this line need to be changed like this:

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

Answer 2

The $(result).find(".resultImg"); will not return an element. because result is a class. You have to replace it with $(".result").find(".resultImg");

Below is a working snippet.

 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

The problem is with var el = $(result).find(".resultImg");

result dont have context as document, it should be var el = $("#"+targetId).find(".resultImg");

I replace the image from your code as color and use "#"+targetId as #test just to show you its working

 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

Try this:

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++;
}

You can change the fadeIn and fadeOut time manually. And set the time when the image should change. I set it to 1 second (1000 milliseconds) now.