最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
js如何实现无缝轮播图效果 js实现无缝轮播图效果代码
时间:2020-03-09 编辑:袖梨 来源:一聚教程网
本篇文章小编给大家分享一下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]; } } })();
全部代码:
无缝轮播图
相关文章
- js实现音乐播放器代码展示 10-12
- js实现图片查看器代码展示 10-12
- JS中switch的四种写法介绍 10-12
- js实现新闻轮播效果教程 10-11
- JS实现简单的图片切换功能教程 10-11
- js实现下拉刷新和上拉加载解析 09-28