gpt4 book ai didi

jquery - 更改 div 错误的背景图像

转载 作者:可可西里 更新时间:2023-11-01 13:04:21 25 4
gpt4 key购买 nike

我想在 9 个不同图像之间循环更改 div 的背景。我尝试使用我在 stackoverflow 上找到的代码,但出了点问题......我是 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-itemch-img-1)。选择器正确后,您可以使用 $(this)

引用该对象

Fiddle Example

所以你更新的 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);
}

关于jquery - 更改 div 错误的背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34842928/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com