js如何实现轮播图-mile米乐体育

js如何实现轮播图

本篇内容介绍了“js如何实现轮播图”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

实现功能：

1、自动轮播：鼠标停留在轮播图上时不切换图片，鼠标离开后自动轮播。

2、点击左右按钮切换图片。

3、点击下方按钮切换到对应的图片。

4、轮播图大小自适应：

可以放入到执行的父容器中展示。

不指定父容器时，默认放入body标签。占满一屏的宽度，当改变浏览器窗口大小时，轮播图大小成比例改变。

可以指定轮播图的宽高。

实现方式：用面向对象的方式实现，使用时传入图片和图片对应的数据，再创建实例。

importcarouselfrom'./js/carousel.js';varitemlist1=[{day:26,date:"/oct.2020",title:"秘境之蓝无阿里不西藏自驾阿里小北线",src:"./carousel_img/a.jpg",},{day:25,date:"/oct.2020",title:"这是一个什么样的国家？",src:"./carousel_img/b.jpg",},{day:24,date:"/oct.2020",title:"在徽州，给秋天写了8封信",src:"./carousel_img/c.jpg",},{day:23,date:"/oct.2020",title:"「穿过狂野的风」赶赴内蒙的追羊计划",src:"./carousel_img/d.jpg",},{day:22,date:"/oct.2020",title:"爱让我们无所不能｜南极大冒险",src:"./carousel_img/e.jpg",},];letcarousel1=newcarousel(itemlist1);carousel1.appendto(".div1");animation();functionanimation(){requestanimationframe(animation);carousel1.update();//carousel2.update();}

代码：

importcomponentfrom'./component.js';exportdefaultclasscarouselextendscomponent{imglist;bnlist;imgcon;dot;dotlist=[];data;direction;pos=0;x=0;speedx=1;bool=false;time=200;autobool=true;//width=13.66;//height=4.55;width;height;constructor(_data,_width,_height){super("div");this.data=_data;this.width=_width;this.height=_height;this.elem.classname="carousel";//object.assign(this.elem.style,{//width:this.width "rem",//height:this.height "rem",//position:"relative",//overflow:"hidden",//});letarr=["./carousel_img/left.png","./carousel_img/right.png"];let_imglist=this.data.reduce((value,item)=>{if(item.src)value.push(item.src);returnvalue},arr);this.loadimg(_imglist,this.createcarousel);//window.addeventlistener("resize",e=>this.resizehandler(e));}createcarousel(imglist){object.assign(this.elem.style,{width:this.width "rem",height:this.height "rem",position:"relative",overflow:"hidden",});this.imglist=imglist;this.bnlist=this.imglist.splice(0,2);imglist.foreach(item=>{object.assign(item.style,{width:this.width "rem",height:this.height "rem",})})this.createimgcon();this.createdotlist();this.createbn();//动画一般在外面做，类里面只需要写状态更新即可。//this.animation();//鼠标停留在轮播图上时不进行自动轮播。this.elem.addeventlistener("mouseenter",e=>this.mousehandler(e));this.elem.addeventlistener("mouseleave",e=>this.mousehandler(e));}createimgcon(){this.imgcon=document.createelement("div");object.assign(this.imgcon.style,{width:this.width*2 "rem",height:this.height "rem",position:"absolute",});letitem=this.createitem(this.imglist[0],this.data[0]);this.imgcon.appendchild(item);this.elem.appendchild(this.imgcon);}createitem(img,obj){letitem=document.createelement("div");object.assign(item.style,{width:this.width "rem",height:this.height "rem",position:"relative",float:"left",});lettitle=document.createelement("div");object.assign(title.style,{position:"absolute",left:"15%",top:"0.3rem",fontsize:"0.3rem",color:"#ffffff",textshadow:"0.02rem0.02rem0.02rem#000000",width:"8rem",lineheight:"0.5rem",})lethead1=document.createelement("div");object.assign(head1.style,{height:"0.5rem",})head1.textcontent=obj.date;letspan=document.createelement("span");object.assign(span.style,{fontsize:"0.4rem",});span.textcontent=obj.day;lethead2=document.createelement("div");object.assign(head2.style,{height:"0.5rem",})head2.textcontent=obj.title;head1.insertbefore(span,head1.firstchild);title.appendchild(head1);title.appendchild(head2);item.appendchild(title);item.appendchild(img);returnitem;}createdotlist(){this.dot=document.createelement("ul");object.assign(this.dot.style,{liststyle:"none",margin:0,padding:0,position:"absolute",left:(this.width-1.8)/2 "rem",bottom:"0.3rem",})for(leti=0;ithis.dotclickhandler(e));this.elem.appendchild(this.dot);}createbn(){for(leti=0;ithis.bnclickhandler(e));this.elem.appendchild(this.bnlist[i]);}}bnclickhandler(e){if(this.bool)returnif(e.target===this.bnlist[0]){this.direction="left";this.pos ;if(this.pos>this.imglist.length-1)this.pos=0;}else{this.direction="right";this.pos--;if(this.pos<0)this.pos=this.imglist.length-1;}this.bool=true;this.createnextitem();}dotclickhandler(e){if(e.target.constructor!==htmllielement)return//这里因为是对父元素进行侦听，因此要先判断点击的是不是li，如果点击的不是小圆点就不能改变开关，直接return。不能先改变开关。if(this.bool)returnfor(leti=0;i0){this.imgcon.lastelementchild.remove();this.x=0;this.bool=false;}}this.imgcon.style.left=this.x "rem";}autoplay(){if(!this.autobool)returnthis.time--;//增加防抖if(this.time===0){letevt=newevent("click");this.bnlist[0].dispatchevent(evt);this.time=200;}}resizehandler(e){document.documentelement.style.fontsize=document.documentelement.clientwidth/(this.width*100)*100 "px";}appendto(parent){if(typeofparent==="string")parent=document.queryselector(parent);parent.appendchild(this.elem);if(!isnan(this.width)&&!isnan(this.height))returnif(parent===document.body){this.width=13.66;this.height=4.55;}else{letrect=parent.getboundingclientrect();this.width=rect.width/100;this.height=rect.height/100;}}mousehandler(e){if(e.type==="mouseenter"){this.autobool=false;}else{this.autobool=true;}}//图片预加载loadimg(_imglist,_callback){letimg=newimage();img.i=0;img.arr=[];img.imglist=_imglist;//img.callback=_callback;img.src=_imglist[img.i];img.addeventlistener("load",e=>this.imgloadfinishhandler(e));}imgloadfinishhandler(e){//console.log(e.currenttarget);e.currenttarget.arr.push(e.currenttarget.clonenode());e.currenttarget.i ;if(e.currenttarget.i

“js如何实现轮播图”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注恰卡编程网网站，小编将为大家输出更多高质量的实用文章！