我希望在一个循环中将一个div的背景更改为9个不同的图像。 我尝试使用我在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>