Javascript在X秒后使data-attr中的图像成为内联背景图像

Question

问题

我有一个div，其中包含存储在数据属性中的图像路径列表，如下所示：

<!-- Multiple background images stored in data-attr -->
<div class="banner" data-bg="http://placehold.it/350x150, http://placehold.it/350x250, http://placehold.it/350x350"></div>

我写了一些Javascript来检索数据属性并将URL拆分成一个数组：

function backgroundPhader(){
    //get bg el
    var bg_el = document.getElementsByClassName('banner')[0];
  
  //make empty bg array
  var bg_arr = [];
  
  //console.log(bg_el);
  //get data-attr of bgs
  var bg_data = bg_el.getAttribute("data-bg");
  
  //console.log(bg_data);
  bg_arr = bg_data.split(",");
  
  console.log(bg_arr);
}
backgroundPhader();

下一步在哪里

如果纯 Javascript 不太复杂，我现在想尝试做的是获取数组中的每个项目并将其作为内联背景图像应用——在设定的时间段内一次一个。我无法弄清楚如何从数组中提取单个项目并将其应用为内联样式。

帮助我指出正确的方向会很棒。如果有帮助，我也有小提琴。

Answer 1

setInterval将在指定的时间间隔后调用该函数。

split将使用上述separator拆分字符串并返回数组。可以使用数组index来获取数组的值。

试试这个：

function backgroundPhader() {
  var bg_el = document.getElementsByClassName('banner')[0];
  var bg_data = bg_el.getAttribute("data-bg");
  var bg_arr = bg_data.split(",");
  var val = 0;
  var iterator = function() {
    if (val > bg_arr.length - 1) {
      val = 0;
    }
    document.body.style.backgroundImage = 'url(' + bg_arr[val] + ')';
    ++val;
  };
  iterator();
  setInterval(iterator, 1000);
}
backgroundPhader();

<!-- Multiple background images stored in data-attr -->
<div class="banner" data-bg="http://placehold.it/350x150, http://placehold.it/350x250, http://placehold.it/350x350"></div>