Question

我使用以下代码将HTML字符串动态添加到div元素。我想在向DOM添加HTML后每秒更改一次图像。但我的代码不起作用。我的错误在哪里？

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");

以下是一个工作片段。

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

问题在于var el = $(result).find(".resultImg");

result没有上下文作为文档，它应该是var el = $("#"+targetId).find(".resultImg");

我将代码中的图片替换为颜色，并将"#"+targetId用作#test只是为了向您显示其工作

＆＃13;

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);

＆＃13;

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

＆＃13;

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毫秒）。

每秒动态更改背景图像

4 个答案: