//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]; } } })();
全部代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝轮播图</title> <script src="https://www.jb51.net/js/Utils.js"></script> </head> <body> <script> //无缝轮播图,全JS /* * 1\轮播图大容器-->图片容器,左右按钮,小圆点 * 2\点击按钮,标志当前挪动图片索引,移动的方向 * 3\点击小圆点,标志当前挪动图片的索引,移动的方向 * 4\创建目标图片放置在当前图片的前或后 * 5\移动图片容器到目标图片位置后,删除前或后原来的图片 * */ var bnList,imgList,imgCon,ul,pre;//存储 左右按钮名 图片名 图片容器 下方圆点标签容器 var position=0,//图片的序号 direction="left",//方向 speed=30, time=300, autoBoolean=false, playBoolean=false; const WIDTH=1200,//常量定义轮播图高宽 HEIGHT=400; init(); function init() { //调用Utils中的loadImg方法 将图片名数组 和回调函数名传入 Utils.loadImg(["left.png","right.png","a.jpeg","b.jpeg","c.jpeg","d.jpeg","e.jpeg"],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)" }); console.log(carousel);//carousel为最外层div容器，包括轮播图容器，圆点标签， 左右按钮 createImgCon(carousel);//调用函数createImgCon在 carousel中创建轮播图图片容器， 传入carousel为父容器 createBn(carousel);//调用函数createBn中创建左右按钮， 传入carousel为父容器 createDot(carousel);//调用函数createDot中创建下方圆点标签， 传入carousel为父容器 document.body.appendChild(carousel);//在body中插入div carousel carousel.addEventListener("mouseenter",mouseHandler);//给div carousel添加鼠标进入事件 carousel.addEventListener("mouseleave",mouseHandler);//给div carousel添加鼠标离开事件 //下方圆点标签距左边距 ul.style.left=(WIDTH-ul.offsetWidth)/2+"px"; changeDot(); setInterval(animation,16);//设置周期执行函数 } function mouseHandler(e) {//鼠标停止，开始轮播图自动播放 if(e.type==="mouseenter"){//鼠标进入停止自动播放，重置time计时 autoBoolean=false; time=300; }else if(e.type==="mouseleave"){//鼠标离开开始自动播放 autoBoolean=true; } } function createImgCon(parent) {//创建轮播图容器div imgCon=ce("div",{//调用ce创建div width:WIDTH+"px", height:HEIGHT+"px", position:"absolute", left:"0px" }); imgCon.appendChild(imgList[position]);//在创建的div imgCon 中添加图片 parent.appendChild(imgCon);//在传来的父元素div中添加新建的div imgCon } 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 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 bnClickHandler(e) {//左右移点击移动图片 if(playBoolean) return; 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; if(e.target.nodeName!=="LI") return;//点击的不是li return var arr=Array.from(this.children);//this=ul var index=arr.indexOf(e.target);//index存点击的li在arr中的下标 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 return 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; time--; if(time>0) return; time=200; var evt=new MouseEvent("click"); bnList[1].dispatchEvent(evt);//dispatchEvent事件触发器，触发bnList[1]的click事件 } function ce(type,style) { //创建标签元素并添加样式 (创建元素类型 ,添加的css样式) var elem=document.createElement(type); /*Object.assign方法用来将源对象（source）的所有可枚举属性， 复制到目标对象（target）。它至少需要两个对象作为参数， 第一个参数是目标对象，后面的参数都是源对象。*/ Object.assign(elem.style,style); return elem; } </script> </body> </html>
精彩专题分享：