js实现无缝轮播图效果

本文实例为大家分享了js实现无缝轮播图的具体代码，供大家参考，具体内容如下

//Utils.js
 
//封装 预加载图片
var Utils=(function () {
  return {
    //SSS
    loadImg:function (srcList,callBack) {//图片地址 回调函数
      var img=new Image();
      img.num=0;//初始化num为0 图片数
      img.imgList=[];//存放图片
      img.srcList=srcList;
      img.callBack=callBack;//回调函数
      img.addEventListener("load",this.loadHandler);//加载load
      img.src="./img/"+srcList[img.num];//拼接图片地址
    },
    loadHandler:function (e) {
     //this 指代img
     /*cloneNode该方法将复制并返回调用它的节点的副本。
     * 如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。
     否则（也就是默认值，或者false），它只复制当前节点。*/
      this.imgList.push(this.cloneNode(false));//将img图片尾插入imgList数组
      this.num++;
      if(this.num>=this.srcList.length){//图片数>=srcList数组(保存图片地址)的长度
        this.callBack(this.imgList);//将数组传入回调函数
        return;
      }
      //事件侦听没有被删除,只需更改src,监听加载load后触发该事件,进入该函数this.loadHandler
      this.src="./img/"+this.srcList[this.num];
    }
  }
})();

全部代码：

精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。