图片预加载封装
//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];
}
}
})();
main代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/Utils.js"></script>
</head>
<body>
<script>
//无缝轮播图,全JS
/*
* 1\轮播图大容器-->图片容器,左右按钮,小圆点
* 2\点击按钮,标志当前挪动图片索引,移动的方向
* 3\点击小圆点,标志当前挪动图片的索引,移动的方向
* 4\创建目标图片放置在当前图片的前或后
* 5\移动图片容器到目标图片位置后,删除前或后原来的图片
* */
var bnList,imgList,imgCon,ul,pre;//存储 左右按钮 图片名 图片容器 下方圆点标签容器
var position=0,//图片的序号
direction="left",//方向
playBo