JS实现背景图片自定义切换

实现思路：

1. 定义一个定时器以每秒单位，并且定义一个变量i用来管理秒数。
2. 管理一个数组，用来存放照片路径和"照片切换时"的秒数属性。
3. 在定时器中i与照片秒数属性相同时就切换到另一张，如果最后一张照片时，则重置i重新开始计时。

我们是有一张固定照片，十秒钟切换自定义照片，但代码逻辑大差不差。

代码实现：

点击查看代码

const CustomForeach = async (arr, callback) => {
        const length = arr.length;
        const O = Object(arr);
        let k = 0;
        while (k < length) {
             if (k in O) {
                 const kValue = O[k];
                 await callback(kValue, k, O);
             }
             k++;
        }
}

let arr = [{path: '',second: 10}]
axios({
      method: 'get',
      url: 'xxxx',
}).then(async res => {
   if (res.data.data.length > 1) {
      //  ",5_7150d586-db7d-4aac-a958-3b6d7280dfe91.jpg"  这是后端给的数据，_前面是秒数，还需要自己做层处理
      let newArr = res.data.data.split(',').slice(1)
      //  forEach 会有异步问题所以对forEach进行封装。
      await CustomForeach(arr, async (e, i) => {
            let newArr = e.split('_')
            // second 是下一张图片切换的时间。
            arr.push({
                  'second': arr[i].second + parseInt(newArr[0]),
                  'path': e
            })
      })

      let t = setInterval(loopImage, 1000)
      let i = 0
  
      function loopImage() {
               i++
               arr.forEach((item, index) => {
                   if (i > 9 && i === item.second) {
                        if (index < arr.length && index !== arr.length - 1) {
                             let img = arr[index + 1].path
                             var imgBox = document.getElementById("app");
                             imgBox.style.background = "url(http://127.0.0.1:55/dev-api/" + img + ") center center no-repeat"
                             imgBox.style.backgroundSize = "100% 100%"
                          } else {
                                i = 0
                                var imgBox = document.getElementById("app");
                                imgBox.style.background = "url('../images/1.png') center center no-repeat"
                                imgBox.style.backgroundSize = "100% 100%"
                              }
                       }
                })
          }
   }
})