每秒動態更改背景圖像

我使用下面的代碼將動態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);

來源

2017-01-12 wawanopoulos

可以添加你的HTML和CSS了。 – ab29007

您應該在設置背景之前更新'i'變量，並嘗試用'$（「＃」+ targetId）.find（「。resultImg」）更改'$（result）.find（「。resultImg」）' –

您在哪裏定義了您在模板中使用的「url」，「urlTitle」和「description」變量？ –

你有一個錯誤有：

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

選擇包含在result變量的字符串會給你沒有任何影響，所以你需要選擇元素，從它的您用於連接結果父母。

該行需要改變這樣的：

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

來源

2017-01-12 14:14:48

$(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>

來源

2017-01-12 10:51:01 ab29007

問題是與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>

來源

2017-01-12 10:51:15 rachmatsasongko

試試這個：

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

您可以手動更改淡入淡出和時間。並設置圖像應該改變的時間。我現在將其設置爲1秒（1000毫秒）。

來源

2017-01-12 11:48:44

每秒動態更改背景圖像

回答

相關問題