每秒动态更改背景图像

我使用下面的代码将动态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

每秒动态更改背景图像

回答

相关问题