图片预加载封装
//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",//方向
playBoolean=false,//定义playBoolean是布尔类型
autoBoolean=false,//定义autoBoolean是布尔类型
speed=20,//速度
time=240;//防抖中的间隔时间
const WIDTH=1200,//常量定义的轮播图宽高值
HEIGHT=400;
init();//执行初始函数
function init() {//定义初始函数
Utils.loadImg(["left.png","right.png","a.jpeg","b.jpeg","c.jpeg","d.jpeg","e.jpeg"],createCarousel);
//调用Utils中的loadImg方法，将图片名数组和回调函数名传入createCarousel函数中
}
function createCarousel(list) {//创建轮播图函数
bnList=list.splice(0,2);//将左右按钮图标名从list中移除，添加到bnList数组中
imgList=list;//将图片名添加到数组imgList中
imgList.forEach(function (t) {//遍历数组，给每个img元素添加宽高
t.style.width=WIDTH+"px";
t.style.height=HEIGHT+"px";
});
var carousel=ce("div",{//调用函数ce创建div并添加样式
width:WIDTH+"px",
height:HEIGHT+"px",
position:"relative",
margin:"auto",
overflow:"hidden",
backgroundColor:"rgba(255,0,0,0.3)"
});//carousel是最外层div容器，包括轮播图容器，圆点标签，左右按钮
createImgCon(carousel);//调用函数createImgCon在carousel中创建轮播图图片容器，传入carousel为父容器
createBn(carousel);//调用函数createBn在carousel中创建左右按钮，传入carousel为父容器
createDot(carousel);//调用函数createDot在carousel中创建下方圆点标签，传入carousel为父容器
document.body.appendChild(carousel);//在body中插入carousel的div（容器）
carousel.addEventListener("mouseenter",mouseHandler);//给carousel div添加鼠标进入事件
carousel.addEventListener("mouseleave",mouseHandler);//给carousel div添加鼠标离开事件
ul.style.left=(WIDTH-ul.offsetWidth)/2+"px";
//下方小圆点标签距左边距
changeDot();//执行初始状态时的小圆点样式变化函数changeDot
setInterval(animation,16);//设置周期执行函数
}
function mouseHandler(e) {//鼠标停止，开始轮播图自动播放
if(e.type==="mouseenter"){//鼠标进入停止自动播放
autoBoolean=false;
time=240;//重置time计时
}else if(e.type==="mouseleave"){//鼠标离开时开始自动播放
autoBoolean=true;
}
}
function createImgCon(parent) {//创建轮播图容器div
imgCon=ce("div",{//调用ce创建图片容器div 并设置样式
width:WIDTH+"px",
heigt:HEIGHT+"px",
position:"absolute",
left:"0px"
});
imgCon.appendChild(imgList[position]);//在创建的imgCon div中添加图片
parent.appendChild(imgCon);//将imgCon div添加到父容器中
}
function createDot(parent) {//创建下方小圆点标签
ul=ce("ul",{//调用ce 创建ul 添加样式
listStyle:"none",
position:"absolute",
bottom:"20px",
margin:"0px",
padding:"0px"
});
imgList.forEach(function (t,index) {//遍历imgList 有几张图创建几个li
var li=ce("li",{//新建li，添加样式
float:"left",
width:"18px",
height:"18px",
borderRadius:"9px",
border:"1px solid rgba(255,0,0,0.8)",
marginLeft:index===0 ? "0px" : "10px"
});
ul.appendChild(li);//在ul中插入li
});
ul.addEventListener("click",dotClickHandler);//给ul添加监听点击事件 事件委托
parent.appendChild(ul);//在父元素中插入ul
}
function createBn(parent) {//创建左右按钮
bnList.forEach(function (t,index) {//遍历数组bnList 添加样式
Object.assign(t.style,{
position:"absolute",
left:index===0 ? "20px":"none",
right:index===1 ? "20px":"none",
top:(HEIGHT-t.height)/2+"px"
});
t.addEventListener("click",bnClickHandler);//按钮添加点击监听事件
parent.appendChild(t);//在传来的父元素中添加左右按钮
});
}
function bnClickHandler(e) {//左右移动点击移动图片
if (playBoolean)return;//如果playBoolean 为true跳出
if (bnList.indexOf(this)===0){//查找左移按钮
position--;//图片序号--
direction="right";//图片方向向右
if (position<0)position=imgList.length-1;//如果在第0张点左移，position为最后一张图的序号
}else {//查找右移按钮
position++;//图片序号++
direction="left";//图片方向向左
if (position>imgList.length-1) position=0;//如果在最后1张点右移，position为第一张图的序号
}
createNextImg();//创建下一张图片函数
}
function dotClickHandler(e) {//圆点点击移动事件函数
if(playBoolean) return;//如果playBoolean 为true跳出
if(e.target.nodeName!=="LI")return;//点击的不是li 跳出
var arr=Array.from(this.children);//this是ul
var index=arr.indexOf(e.target);//index是被点击的li在数组中的下标
if (index===position)return;//如果被点击的就是当前的位置，不操作
if(index>position){//如果点击的大于当前
direction="left";//图片左移
}else {//如果点击的小于当前
direction="right";//图片左移
}
position=index;//position赋值为点击的li序号
createNextImg();//执行创建下一张图片
}
function createNextImg() {//创建下一张图片
imgCon.style.width=WIDTH*2+"px";//将轮播图容器宽度乘2（两张图的位置）
if (direction==="left"){//如果图片向左运动
imgCon.appendChild(imgList[position]);//在当前图片后面添加子元素
}else if (direction==="right"){//如果图片向右运动
imgCon.insertBefore(imgList[position],imgCon.firstElementChild);//在第一张图片前面添加子元素
imgCon.style.left=-WIDTH+"px";//移动原有图片容器的位置左右一张图片宽度
}
playBoolean=true;//图片加载完设置为true
changeDot();//执行改变下方圆形标签的颜色
}
function changeDot() {//改变下方圆形标签的颜色
if(pre){
pre.style.backgroundColor="rgba(255,0,0,0)";//颜色
}
pre=ul.children[position];//获取当前轮播图对应的li
pre.style.backgroundColor="rgba(255,0,0,0.5)";//显示该li的颜色
}
function animation() {
imgPlay();//图片点击移动
autoPlay();//图片自动移动
}
function imgPlay() {
if (!playBoolean)return;//为false 跳出
if (direction==="right"){//图片右移
imgCon.style.left=imgCon.offsetLeft+speed+"px";//图片以speed的速度右移
if (imgCon.offsetLeft>=0){//运动到轮播图框停止
imgCon.style.left="0px";
playBoolean=false;
imgCon.lastElementChild.remove();//清除上一张图片
imgCon.style.width=WIDTH+"px";//重置轮播图容器宽度
}
}else if(direction==="left"){//图片左移
imgCon.style.left=imgCon.offsetLeft-speed+"px";//图片以speed的速度左移
if (imgCon.offsetLeft<=-WIDTH){//如果运动后图片在轮播图框左一张宽度时
playBoolean=false;
imgCon.firstElementChild.remove();//清除上一张图片
imgCon.style.left="0px";//重置轮播图容器位置
imgCon.style.width=WIDTH+"px";//重置轮播图容器宽度
}
}
}
function autoPlay() {//自动播放
if (!autoBoolean)return;//为false 跳出
time--;//防抖
if(time>0)return;//如果大于0 跳出
time=240;//重置防抖间隔时间
var evt=new MouseEvent("click");//创建鼠标事件
bnList[1].dispatchEvent(evt);//事件抛发 触发bnList[1]的click事件
}
function ce(type,style) {//创建标签元素并添加样式（创建元素类型，添加的css样式）
var elem=document.createElement(type);
Object.assign(elem.style,style);
/*Object.assign方法用来将源对象（source）的所有可枚举属性，
复制到目标对象（target）。它至少需要两个对象作为参数，
第一个参数是目标对象，后面的参数都是源对象。*/
return elem;
}
</script>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
