微客导航 » 文章资讯 » js实现无缝轮播图效果

js实现无缝轮播图效果

2023-07-29 14:51:04 157

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

//Utils.js

//封装预加载图片
varUtils=(function(){
return{
//SSS
loadImg:function(srcList,callBack){//图片地址回调函数
varimg=newImage();
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图片轮播

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

js实现无缝轮播图效果

热门推荐

随机推荐