Question

嗨，我正尝试每5秒钟更改div的背景图片并重复这些图片。使用简单的html，例如带有class和id的div。

 <body>

<div class="background-rep" style="max-width:500px">
  <p>The slides </p>


</div>

<script>
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var y =["img_rr_01.jpg" , "img_rr_02.jpg" , "img_rr_03.jpg", "img_rr_04.jpg" ];
    var x = document.getElementsByClassName("background-rep");
    for (i = 0; i < y.length; i++) {
       x.style.backgroundImage = url(y[i])";  
    }
    myIndex++;
    if (myIndex > y.length) {myIndex = 1}    
    x.style.backgroundImage = "block";  
    setTimeout(carousel, 9000);    
}
</script>

</body>

我尝试了一些来自stackoverflow的解决方案，但它们无法正常工作谢谢

Answer 1

这里有一些问题。首先：获取元素应该是

var x = document.querySelector('.background-rep');

接下来，您的循环当前会导致设置数组中的最后一个图像以及不正确的语法。我认为您正在寻找：

x.style.bacgkroundImage = "url(" + y[myIndex] + ")";

您还应该摆脱x.style.background = "block"行，因为这会覆盖新设置的背景图片。

每隔5秒，您的SetTimeout应该为5000，因为它以毫秒为单位：

setTimeout(carousel, 5000);

我想每5秒钟更改div的背景图片

1 个答案: