第八周第五天笔记之es6+面向对象+jQuery版左右切换轮播图实例

1 es6+面向对象+jQuery版左右切换轮播图实例

• 思路：
  • es6中面向对象的创建，用class创建类
  • 全局属性放在构造函数中，作为实例的私有属性，方法放在原型上，作为公有方法调用
  • 创建一个公共属性init,作为所有逻辑思维的调用
  • 然后再创建多个公共属性函数，作为每个步骤的定义函数，调用的时候，用this调用；
  • 调用时，创建实例，实例调用init方法，也可以将其放在构造函数中调用；
• 知识点：
  • 定时器回调函数中的this指向问题，回调函数中的this指向window，利用箭头函数保证函数中的this指向实例；
  • 事件中回调函数中的this指向问题，跟定时器相同，均为window，利用箭头函数保证this指向实例；
  • 焦点手动点击切换函数中的三种设置，点击事件中获取当前元素可以用ev.target获得；
  • 箭头函数在普通函数中设置为：var fn=()=>{},在对象中设置为：fn:()=>{};
• 代码：
  • JS代码：

   //面向对象就是创建一个类，es6中创建类用class
   //全局属性放在构造函数中，作为实例的私有属性，方法放在原型上，作为公有方法调用
   class Carousel{
       //私有属性放在constructor上
       constructor(){
           this.oWrap=$(".wrap");
           this.boxBanner=this.oWrap.find(".boxbanner");
           this.aImg=null;
           this.oUl=this.oWrap.find("ul");
           this.aLi=null;
           this.aLeft=this.oWrap.find(".Left");
           this.aRight=this.oWrap.find(".Right");
           this.data=null;
           this.n=null;
           this.timer=null;
       }
       //公有方法直接创建函数
       init(){
           //所有逻辑思维的调用
           //1 获取数据
           this.getData();
           //2 绑定数据
           this.blind();
           //3 图片延迟加载
           setTimeout(()=>{
               this.lazyImg();
           },1000);
           //4 图片自动轮播
           //定时器中的回调函数的this指向window,利用箭头函数将this改为实例
           clearInterval(this.timer);
           this.timer=setInterval(()=>{
               this.autoMove();
           },2000);
           //5 焦点的自动轮播
           //6 鼠标移入停止，鼠标移出继续
           this.cursorMouse();
           //7 点击焦点手动切换
           this.handleLi3();
           //8 点击左右按钮手动切换
           this.leftrightMove();
       }
       //函数的定义阶段
       getData(){
           //第一种方法：可以新建一个变量，储存住实例this;
           //var _this=this;
           $.ajax({
               type: "get",
               url: "data/data2.txt?"+Math.random(),
               async: false,
               dataType: "json",
               //success函数中的this指向ajax对象
               /*success:function (val) {
                   _this.data=val;//使用变量获取实例this
               }*/
               //第二种方法：利用箭头函数可以拿到实例this
               success:(val)=>{
                   //此时this为实例this
                   this.data=val;
               }
           })
       }
       blind(){
           var str="";
           var strli="";
           $.each(this.data,function (index, item) {
               str+=``;
               strli+=index==0?`
  `:`
  `;
           });
           str+=``;
           this.boxBanner.html(str);
           this.oUl.html(strli);
           this.aImg=this.boxBanner.children("img");
           this.boxBanner.css("width",this.aImg.length*this.aImg[0].offsetWidth);
           this.aLi=this.oUl.children("li");
       }
       lazyImg(){
           this.aImg.each(function (index, item) {
               var frgImg=new Image();
               frgImg.src=$(item).attr("realImg");
               frgImg.onload=function () {
                   item.src=this.src;
                   frgImg=null;
               };
               frgImg.onerror=function () {
                   alert("图片加载错误");
               }
           });
       }
       autoMove(){
           if(this.n>=this.aImg.length-1){
               this.boxBanner.css("left",0);
               this.n=0;
           }
           this.n++;
           //this.n%=this.aImg.length;
           this.boxBanner.stop().animate({left:-this.n*750},1000);
           //n取值为1,2,3,4,1,2,3,4
           this.autoMoveli();
       }
       autoMoveli(){
           var i=this.n%(this.aImg.length-1);
           this.aLi.eq(i).addClass("active").siblings("li").removeClass("active");
       }
       cursorMouse(){
           this.oWrap.mouseover(()=>{
               clearInterval(this.timer);
               this.aLeft.show();
               this.aRight.show();
           }).mouseout(()=>{
               this.aLeft.hide();
               this.aRight.hide();
               clearInterval(this.timer);
               this.timer=setInterval(()=>{
                   this.autoMove();
               },2000);
           });
       }
       //焦点手动切换
       //第一种方法：创建变量，保存实例this，然后使用时直接使用变量；
       /*handleLi(){
           var _this=this;
           this.aLi.click(function () {
               _this.n=$(this).index();
               _this.boxBanner.stop().animate({left:-_this.n*750},1000);
               _this.autoMoveli();
           });
       }*/
       //第二种方法：利用点击事件中ev.target能获取点击事件的元素，利用箭头函数保证this始终为实例
       /*handleLi2(){
           this.aLi.click((ev)=> {
               //箭头函数中的this为实例
               //点击事件中ev.target代表被点击元素，为原生元素
               this.n=$(ev.target).index();
               this.boxBanner.stop().animate({left:-this.n*750},1000);
               this.autoMoveli();
           });
       }*/
       //第三种方法：利用实例each遍历aLi，然后获得索引值，利用箭头函数保证this始终指向实例；
       handleLi3(){
           this.aLi.each((index, item)=> {
               //用箭头函数后，里面的this为实例
               $(item).click(()=> {
                   this.n=index;
                   this.boxBanner.stop().animate({left:-this.n*750},1000);
                   this.autoMoveli();
               })
           });
       }
       leftrightMove(){
           this.aRight.click(()=>{
               this.autoMove();
           });
           this.aLeft.click(()=>{
               if(this.n<=0){
                   this.n=this.aImg.length-1;
                   this.boxBanner.css("left",-this.n*750);
               }
               this.n--;
               this.boxBanner.stop().animate({left:-this.n*750},1000);
               this.autoMoveli();
           })
       }
   }
  

  • JS代码优化：

   class Carousel {
       //私有属性
       constructor(){
           this.oWrap=$(".wrap");
           this.oBox=$(".wrap .boxbanner");
           this.oUl=$(".wrap ul");
           this.oLeft=$(".wrap .Left");
           this.oRight=$(".wrap .Right");
           this.aImg=null;
           this.aLi=null;
           this.data=null;
           this.timer=null;
           this.imgWid=null;
           this.m=null;
           this.n=0;
           this.init();
       }
       //公共方法
       init(){
           this.getData();
       }
       //获取后台数据
       getData(){
           var _this=this;
           $.ajax({
               url:"./ajax/data.txt",
               type:"get",
               dataType:"json",
               success:function (val) {
                   _this.data=val;
                   _this.insertDom();
                   _this.autoMove();
                   _this. mouseEvent();
               },
               error:function (err) {
                   console.log(err);
               }
           })
       }
       //插入dom中
       insertDom(){
           var imgFrg=document.createDocumentFragment();
           var liFrg=document.createDocumentFragment();
           $(this.data).each(function (index,item) {
               var oImg=new Image();
               var oLi=document.createElement("li");
               oImg.setAttribute("realImg",item.imgSrc);
               if(index===0){
                   $(oLi).addClass("active");
               }
               imgFrg.append(oImg);
               liFrg.append(oLi);
           });
           var extImg=new Image();
           extImg.setAttribute("realImg",this.data[0].imgSrc);
           imgFrg.append(extImg);
           this.oBox.append(imgFrg);
           this.oUl.append(liFrg);
           imgFrg=null;
           liFrg=null;
           //获取img和li元素
           this.aImg=this.oBox.children("img");
           //img的个数
           this.m=this.aImg.length;
           //img的宽度
           this.imgWid=this.aImg[0].offsetWidth;
           this.aLi=this.oUl.children("li");
           //需要重新设置宽高
           this.oBox.css("width",this.imgWid*this.m);
           this.oUl.css("width",this.aLi[0].offsetWidth*this.m+parseFloat($(this.aLi[1]).css("marginLeft"))*(this.m-2));
           this.oUl.css("marginLeft",-this.oUl[0].offsetWidth/2);
           //图片懒加载
           setTimeout(this.showImgs.bind(this),300);
           //手动点击li
           this.handleLi();
       }
       //图片懒加载
       showImgs(){
           var _this=this;
           this.aImg.each(function () {
               _this.lazyLoad(this);
           })
       }
       lazyLoad(ele){
           if(ele.loaded) return;
           var Img=new Image();
           Img.src=ele.getAttribute("realImg");
           Img.onload=function () {
               ele.src=this.src;
               ele.loaded=true;
               Img=null;
           };
           Img.onerror=function () {
               console.log("图片加载失败");
               ele.loaded=true;
               Img=null;
           }
       }
       //自动轮播
       autoMove(){
           clearInterval(this.timer);
           this.timer=setInterval(this.move.bind(this),3000);
       }
       move(){
           if(this.n===this.m-1){
               this.n=0;
               this.oBox.css("left",0);
           }
           this.n++;
           this.animaTo();
       }
       animaTo(){
           this.oBox.stop().animate({
               left:-this.n*this.imgWid
           },1000);
           this.autoLi();
       }
       //li自动轮播
       autoLi(){
           var s=this.n%5;
           this.aLi.eq(s).addClass("active").siblings("li").removeClass("active");
       }
       //鼠标事件
       mouseEvent(){
           this.oWrap.mouseover(()=>{
               clearInterval(this.timer);
               this.oLeft.show();
               this.oRight.show();
           }).mouseout(()=>{
               this.autoMove();
               this.oLeft.hide();
               this.oRight.hide();
           });
           this.oLeft.click(()=>{
               if(this.n===0){
                   this.n=this.m-1;
                   this.oBox.css("left",-this.n*this.imgWid);
               }
               this.n--;
               this.animaTo();
           });
           this.oRight.click(this.move.bind(this));
       }
       //手动点击li达到跳转效果
       handleLi(){
           this.aLi.each((index,item)=>{
               $(item).click((e)=>{
                   this.n=$(e.target).index();
                   this.animaTo();
               })
           })
       }
   }
  

  • html代码：