第九周第二天笔记之渐隐渐现轮播图实例es6版面向对象+原生JS

1 渐隐渐现轮播图实例之es6面向对象+原生JS

• 思路：
  • 目的：使页面在特定时间间隔后，不断的改变图片，添加一个效果，使其达到渐隐渐现的显现；
  • 整体思想：将所有图片定位在一个位置，让其相互覆盖，通过改变层级来使指定的图片显示在最上面，添加一个效果，目的是将透明度从0改变到1的过程，慢慢变化；
• 知识点：
  • 封装的animate()函数的调用执行，是针对window来执行的，向里面传入的实参中，可以是实例的一些数据
  • for循环中用var声明定义i，不会形成私有作用域，所以添加事件后，事件中的i是错的，但是可以用let来声明定义i，这样每循环一次就会形成私有作用域，保存住实时i，当添加事件后，里边i为实时i，相当于闭包思想；
  • 构造函数中的函数中添加事件后，事件中的this不再是实例，所以需要在事件外新建一个变量赋值实例，然后在事件中使用该变量；
• 代码：
  • JS代码：

   //创建类
   class Fand{
       constructor(opt){
           opt=opt||{};
           //获取元素
           this.oWrap=opt.ele;
           this.duration=opt.duration || 1000;
           this.boxBanner=utils.getByClass("boxbanner",this.oWrap)[0];
           this.aImg=this.oWrap.getElementsByTagName("img");
           this.oUl=this.oWrap.getElementsByTagName("ul")[0];
           this.aLi=this.oWrap.getElementsByTagName("li");
           this.aLeft=utils.getByClass("Left")[0];
           this.aRight=utils.getByClass("Right")[0];
           this.data=null;
           this.n=null;
           this.timer=null;
           this.init();
       }
       init(){
           //获取数据
           this.getData1();
           //绑定数据
           this.bind();
           //图片懒加载，添加定时器，目的是像延迟加载
           setTimeout(this.showImg.bind(this),1000);
           //自动轮播
           this.timer=setInterval(this.autoMove.bind(this),3000);
       }
       //获取数据
       getData1(){
           var _this=this;
           var xml=new XMLHttpRequest();
           xml.open("GET","data/data5.txt?"+Math.random(),false);
           xml.onreadystatechange=function () {
               if(xml.readyState==4 && /^2\d{2}$/.test(xml.status)){
                   _this.data=utils.jsonParse(xml.responseText);
               }
           };
           xml.send();
       }
       //绑定数据
       bind(){
          var str="";
          var strli="";
          for(var i=0; i<this.data.length; i++){
              var cur=this.data[i];
              str+=`<img src="" realImg="${cur.imgSrc}" alt=""/>`;
              strli+=i==0?`<li class="active"></li>`:"<li></li>";
          }
          this.boxBanner.innerHTML=str;
          utils.css(this.aImg[0],{
              zIndex:1,
              opacity:1
          });
          this.oUl.innerHTML=strli;
          this.oUl.style.zIndex=1;
       }
       //图片懒加载
       showImg(){
           for(var i=0; i<this.aImg.length; i++){
               this.lazyImg(this.aImg[i]);
           }
       }
       lazyImg(img){
           var frgImg=new Image();
           frgImg.src=img.getAttribute("realImg");
           frgImg.onload=function () {
               img.src=this.src;
               frgImg=null;
           };
           frgImg.onerror=function () {
               img.style.backgroundColor="red";
               frgImg=null;
           }
       }
       //自动轮播
       autoMove(){
           this.n++;
           this.n%=this.aImg.length;
           //n取值为1,2,3,0,1,2,3,0,1
           this.setBanner();
       }
       setBanner() {
           //哪张图片的索引等于this.n，就让哪张图片显示
           for (var i = 0; i < this.aImg.length; i++) {
               if (i == this.n) {
                   this.aImg[i].style.zIndex = 1;
                   //运动效果
                   //animate函数是window调用，然后在实例中传入实参，实参中的this指向当前实例；
                   animate({
                       ele: this.aImg[i],
                       target: {opacity: 1},
                       duration: this.duration,
                       callback:function () {
                           //在封装animate函数时，设置回调函数中的this为元素
                           var siblings=utils.siblings(this);
                           for(var i=0; i<siblings.length; i++){
                               utils.css(siblings[i],"opacity",0);
                           }
                       }
                   })
               } else {
                   utils.css(this.aImg[i], "zIndex", 0);
               }
           }
           //焦点跟随自动轮播
           this.bannerTip();
       }
       bannerTip(){
           for(var i=0; i<this.aLi.length; i++){
               /*if(i==this.n){
                   this.aLi[i].className="active";
               }else{
                   this.aLi[i].className="";
               }*/
               this.aLi[i].className=i==this.n?"active":null;
           }
       }
   }
   //升级版
   class Fina extends Fand{
       constructor(opt){
           super(opt);
           this.Event();
       }
       Event(){
           //鼠标移入停止，移出继续
           this.overOut();
           //焦点手动点击切换
           this.handlebtn();
           //左右按钮手动点击切换
           this.handLeftright();
       }
       overOut(){
           var _this=this;
           this.oWrap.onmouseover=function () {
               clearInterval(_this.timer);
               _this.aLeft.style.display=_this.aRight.style.display="block";
           };
           this.oWrap.onmouseout=function () {
               _this.aLeft.style.display=_this.aRight.style.display="none";
               _this.timer=setInterval(_this.autoMove.bind(_this),3000);
           }
       }
       handlebtn(){
           var _this=this;
           for(let i=0; i<this.aLi.length; i++){
               this.aLi[i].onclick=function () {
                   //for循环中，用let设置，则每次循环均形成一个私有作用域，相当于闭包，保存住i值
                   _this.n=i;
                   _this.setBanner();
               }
           }
       }
       handLeftright(){
           var _this=this;
           this.aRight.onclick=function () {
               _this.autoMove();
           };
           this.aLeft.onclick=function () {
               if(_this.n<=0){
                   _this.n=_this.aImg.length;
               }
               _this.n--;
               _this.setBanner();
           }
       }
   }
  

  • HTML代码：

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>渐隐渐现轮播图实例</title>
       <style>
           *{
               margin: 0;
               padding: 0;
               list-style: none;
           }
           .wrap{
               width: 750px;
               height: 290px;
               margin: 20px auto;
               position: relative;
               background: url("image/7.png") center no-repeat;
               background-size: cover;
           }
           .wrap .boxbanner{
               position: relative;
               width: 750px;
               height: 290px;
           }
           .wrap .boxbanner img{
               position: absolute;
               left: 0;
               top: 0;
               width: 100%;
               height: 100%;
               opacity: 0;
               filter:alpha(opacity:0);
           }
           .wrap ul{
               height: 20px;
               position: absolute;
               right: 40px;
               bottom: 20px;
           }
           .wrap ul li{
               float: left;
               width: 20px;
               height: 20px;
               border-radius: 50%;
               background-color: lightslategray;
               margin-left: 20px;
           }
           .wrap ul li.active{
               background-color: red;
           }
           .wrap a{
               position: absolute;
               width: 43px;
               height: 67px;
               top: 50%;
               margin-top: -34px;
               background: url("image/6.png") no-repeat lightslategray;
               opacity: 0.8;
               filter: alpha(opacity:80);
               z-index: 1;
               display: none;
           }
           .wrap a:hover{
               opacity: 1;
               filter: alpha(opacity:100);
           }
           .wrap a.Left{
               left: 20px;
               background-position: 0 0;
           }
           .wrap a.Right{
               right: 20px;
               background-position: -62px 0;
           }
       </style>
   </head>
   <body>
   <div class="wrap" id="wrap">
       <div class="boxbanner">
           <!--<img src="image/1.jpg" alt=""/>
           <img src="image/2.jpg" alt=""/>
           <img src="image/3.jpg" alt=""/>
           <img src="image/4.jpg" alt=""/>-->
       </div>
       <ul>
           <!--<li class="active"></li>
           <li></li>
           <li></li>
           <li></li>-->
       </ul>
       <a href="javascript:void(0);" class="Left"></a>
       <a href="javascript:void(0);" class="Right"></a>
   </div>
   <script src="JS/utils.js"></script>
   <script src="JS/moveEffect.js"></script>
   <script src="JS/animatSuper.js"></script>
   <script src="JS/lunbo.js"></script>
   <script>
       var oWrap=document.getElementById("wrap");
       /*var f1=new Fand({
           ele:oWrap,
           duration:700
       });*/
       var f1=new Fina({
           ele:oWrap,
           duration:700
       });
   </script>
   </body>
   </html>