js实现无缝轮播图效果
本文实例为大家分享了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='https://www.haobala.com/bcjs/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='https://www.haobala.com/bcjs/img/'+this.srcList[this.num]; } }})();
全部代码：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>无缝轮播图</title> <script src='https://www.haobala.com/bcjs/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创建divwidth: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) {//遍历数组bnListObject.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，有几张图创建几个livar 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>
精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
网公网安备