更改 div 错误的背景图像

我想在 9 个不同图像之间循环更改div 的背景。我尝试使用我在堆栈溢出上找到的代码，但出了点问题......我是Java的新手，所以我找不到我的错误。

我想更改 IMG 的 CSS：

.ch-img-1 { 
    background-image: url(Images/round280/1.png) ;
}

我的代码：

<body>
<ul class="ch-grid">
<li>
    <div class="ch-item ch-img-1">              
    </div>
</li>
</ul>
<script language="JavaScript">
  var currentBackground = 0;
  var backgrounds = [];
  backgrounds[0] = '/Images/round280/1.png';
  backgrounds[1] = '/Images/round280/2.png';
  backgrounds[2] = '/Images/round280/3.png';
  backgrounds[3] = '/Images/round280/4.png';
  backgrounds[4] = '/Images/round280/5.png';
  backgrounds[5] = '/Images/round280/6.png';
  backgrounds[6] = '/Images/round280/7.png';
  backgrounds[7] = '/Images/round280/8.png';
  backgrounds[8] = '/Images/round280/9.png';
function changeBackground() {
    currentBackground++;
    if(currentBackground > 2) currentBackground = 0;
    $('ch-grid.ch-item.ch-img-1').fadeOut(100,function() {
        $('ch-grid.ch-item.ch-img-1').css({
            'background-image' : "url('" + backgrounds[currentBackground] + "')"
        });
        $('ch-grid.ch-item.ch-img-1').fadeIn(100);
    });

    setTimeout(changeBackground, 2000);
}
$(document).ready(function() {
    setTimeout(changeBackground, 2000);        
});
</script>
</body>

您选择div 的方式不正确。 ch-grid是一个类，因此您需要使用"."作为前缀：.ch-grid选择ul的正确方法。因为要选择ul中包含的div，所以需要在父类（ch-grid）和子类（ch-item和ch-img-1）之间留出空格。选择器正确后，您可以使用$(this)

小提琴示例

因此，更新后的 JQuery 如下所示：

function changeBackground() {
    currentBackground++;
    if (currentBackground > 8) currentBackground = 0;
    $('.ch-grid .ch-item.ch-img-1').fadeOut(100,function() {
        var $this = $(this);
        $this.css({
            'background-image' : "url('" + backgrounds[currentBackground] + "')"
        });
        $this.fadeIn(100);
    });
    setTimeout(changeBackground, 2000);
}

相关内容

最新更新

热门标签：