时间戳

首页 > 解决方案 > 我想每 5 秒更改一次 div 的背景图像

jquery - 我想每 5 秒更改一次 div 的背景图像

问题描述

嗨，我正在尝试每 5 秒更改一次 div 的背景图像并重复这些图像。使用简单的 html，例如具有类和 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中的一些解决方案，但它们效果不佳谢谢

标签： jqueryhtmlslideshow

解决方案

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

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

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

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

您还应该删除该行x.style.background = "block"，因为这将覆盖新设置的背景图像。

同样对于 5 秒的间隔，您SetTimeout应该是 5000，因为它以毫秒为单位：

setTimeout(carousel, 5000);

推荐阅读