JavaScript---图片轮播(loop)多个设备展示图片一致，而非重新开始，根据当前时间计算展示图片

标题解释

简单说就是，根据当天的时间来动态切换图片src，不论设备多少，开机运行顺序。进去看到的保证都是在某个相同时间端内的图片是相同的，而非不同设备进去都是从0秒到duration秒采取切换图片！！！

需要的插件支持： dayjs、jquery(提前引入再去测试下面代码)

1.干货代码

<!-- 根据时间来展示切换图片src -->

    // 根据当前时间保证所有设备展示图片一致
    // 插件支持 dayjs
    // window.dayjs  cdn的话可以直接这样写，import、require的话需要挂载到window上
     function ComputedImgIndexOrLength(duration, length) {
      /**
       * duration 图片轮询间隔
       * length   图片长度
       */
      var defaultCount = typeof (duration * length) !== 'number' ? 0 : duration * length
      // 如果计算值非数字直接暂停，返回默认第一张
      if (!defaultCount) {
        console.error('===%s 当前值为 %s===', !duration ? '切换时间' : !length ? '图片长度' : '', !duration ? duration + '' : !length ? 'length' + '' : '')
        return 0
      }
      const currentTime = window.dayjs().hour() * 60 * 60 + window.dayjs().minute() * 60 + window.dayjs().second()
      console.log('===currentTime===', currentTime + 's')
      const reset = currentTime % (duration * length)
      //  循环一轮的总时长， duration * length
      console.log('===返回值为：%s===',  '索引值：' +  Math.floor(reset / duration))
      return Math.floor(reset / duration)
    }

效果图如下

修复上图切换图片有明显的不一致的情况，定时代码也贴出来，供大家学习使用！！！

2.定时器函数（关键点时定时器时间）

 // 这里说明下，300ms的调用时间我测试过，基本满足统一文件在不同时候不同人打开
 // 其展示的图片基本保持一致
 // 码友们测试时如果发现更加精确的时间可以评论区回复，看到会立马回复并检测修正！    

// 设置轮播图片
 function handleImgSwipper(duration, imgArr, id) {
      const length = imgArr.length
      if (window['timer' + id]) window.clearInterval(window['timer' + id]);
      $(`#img-swipper-${id}`).attr("src", imgArr[0]);
      window['timer' + id] = setInterval(function () {
$(`#img-swipper-${id}`).attr("src",imgArr[ComputedImgIndexOrLength(duration,length)]);
      }, 300);
}

 素材图片：

 

改动定时时间后的效果如下：

素材数组：
let imgAr = [
  'https://img-blog.csdnimg.cn/02c6efd47efc448bb799044359fe02c2.jpeg', 
   'https://img-blog.csdnimg.cn/06c0660e76ee437a81968267e51805cf.jpeg', 
   'https://img-blog.csdnimg.cn/74d08501d28f4770b2bbc74449fcd0a1.jpeg', 
   'https://img-blog.csdnimg.cn/3c9fc6160aa846f4a4bf70f65a0b11ba.jpeg'
]

使用函数:  记得先引入 jquery和dayjs

 // 设置轮播图片 id 的目的是当多个img标签控件使用是保证定时器和对应id盒子不会出现覆盖的情况
 // duration :  切换时长,单位：s
 // imgArr   :  图片数组
 // id       :  区分不同img标签盒子
    function handleImgSwipper(duration, imgArr, id) {
      const length = imgArr.length
      if (window['timer' + id]) window.clearInterval(window['timer' + id]);
      $(`#img-swipper-${id}`).attr("src", imgArr[0]);
      window['timer' + id] = setInterval(function () {
      $(`#img-swipper-${id}`).attr("src", imgArr[ComputedImgIndexOrLength(duration, length)]);
      }, 300);
    }

调用函数：handleImgSwipper(3, imgAr, 1)

看下图效果：

优化时间后效果图如下