本篇文章小编给大家分享一下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]; } } })();
全部代码:
无缝轮播图