1. 程式人生 > >面向對象的輪播js

面向對象的輪播js

for循環 指向 charset -type wid rip ack border 匹配

  1.自執行函數的前後要加分號

  案例:

  ;(function(){})();

  2.面向對象的最大優勢節省了許多內存

  正式開寫面向對象的輪播;

  

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title>面向對象的輪播</title>
    <style>
      .slide{
        width:600px;
        height:400px;
        margin:100px auto;
        position:relative;
      }
      .slide>div{
        width:600px;
        height:400px;
        display:none;
      }
      .slide>div:nth-of-type(1){
        display:block;
      }
      img{
        width:100%;
        height:100%;
      }
      button{
        width:40px;
        height:40px;
        border:none;
        position:absolute;
      }
      button:nth-of-type(1){
        top:50%;
        left:0;
      }
      button:nth-of-type(2){
        top:50%;
        right:0;
      }
      ul,ol{
        list-style:none;
        position:absolute;
        bottom:20px;
        left:30%;
      }
      ul>li{
        width:20px;
        float:left;
        height:20px;
        margin-right:10px;
        background:#ccc;
        border-radius:50%;
      }
      ul>li:nth-of-type(1){
        background:red;
      }
    </style>
  </head>
  <body>
    <div id="slide" class="slide">
      <div><img src="img/1.jpg" /></div>
      <div><img src="img/2.jpg" /></div>
      <div><img src="img/3.jpg" /></div>
      <button><</button>
      <button>></button>
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </body>
  </html>
  <script>
    var slide=document.getElementById("slide");
    function Person(obj){
      this.obj=obj;
      //this指向實例對象
      //實例的屬性,獲取slide下所有的div
      this.divs=this.obj.getElementsByTagName("div");
      //實例的屬性,獲取slide下所有的按鈕,用來切換圖片
      this.bth=this.obj.getElementsByTagName("button");
      //實例的屬性,獲取slide下所有的小圓點,用來點擊
      this.lis=this.obj.getElementsByTagName("li");
      //設置用來開啟定時器的實例屬性
      this.t=null;
      //設置一個屬性,讓其功能的索引匹配;
      this.num=0;
    }
    Person.prototype={
      //開辟新的空間時會將原內存銷毀,constructor就會消失
      constructor:Person,
      //開啟一個定時器的方法;
      ding:function(){
        //每次開啟定時器時,先清掉定時器
        clearInterval(this.t)
        //定時器的this都指向window,利用bind的寫法,將定時器的window換成實例對象
        this.t=setInterval(this.qie.bind(this),1000)
      return this //返回實例對象 實現鏈式寫法
      },
      //定時器方法中用來切換圖片的;
      qie:function(){
        //讓定時器運動
        this.num++
        //如果圖片走完,從第一張繼續走
        if(this.num>this.divs.length-1){
        this.num=0
      }
      //通過for循環的目的,就是讓所有的圖片隱藏起來,只讓他對應的索引顯示出來
      for(var i=0;i<this.divs.length;i++){
        this.divs[i].style.display="none";
        this.lis[i].style.background="#ccc";
      }
      //通過索引知道是具體的第幾個div(圖片)顯示出來
      this.divs[this.num].style.display="block"
      //通過索引知道是具體的第幾個小圓點變成紅色
      this.lis[this.num].style.background="red"
    },
    //當鼠標懸浮時關閉定時器的方法;
    over:function(){
      //this指向實例對象
      this.obj.onmouseover=function(){
        //this指向this.obj
        clearInterval(this.t) //this受到了影響,所以用bind
      }.bind(this)
      //在返回實例對象,用於鏈式寫法
    return this
    },
    //當鼠標離開時,在次開啟定時器
    out:function(){
      //this指向實例對象
      this.obj.onmouseout=function(){
        //this指向this.obj
        //當開啟定時器時,先關閉定時器
        clearInterval(this.t)
        //當鼠標離開時,繼續開啟定時器
        this.t=setInterval(this.qie.bind(this),1000) //this沖突,要讓this指向實例對象用window
      }.bind(this)
    return this //返回實例對象,用於鏈式寫法
    },
    //按鈕的事件
    bthclick:function(){
      // this指向實例對象
      //左按鈕的點擊事件
      this.bth[0].onclick=function(){
        // this指向this.bth[0]
        //從最後一張往前切換
        this.num--
        if(this.num<0){
          this.num=2
        }
      //利用for循環將其余的圖片及按鈕隱藏掉,默認色
        for(var i=0;i<this.divs.length;i++){
          this.divs[i].style.display="none";
          this.lis[i].style.background="#ccc";
        }
      //利用索引將想得到的圖片及按鈕顯示出來
        this.divs[this.num].style.display="block";
        this.lis[this.num].style.background="red";
        //this指向this.bth[0]。想讓this指向實例對象,用bind
        }.bind(this);
      this.bth[1].onclick=function(){
        // this指向this.bth[0]
        //從最後一張往前切換
        this.num++
        if(this.num>2){
          this.num=0
        }
      //利用for循環將其余的圖片及按鈕隱藏掉,默認色
      for(var i=0;i<this.divs.length;i++){
        this.divs[i].style.display="none";
        this.lis[i].style.background="#ccc";
      }
      //利用索引將想得到的圖片及按鈕顯示出來
      this.divs[this.num].style.display="block";
      this.lis[this.num].style.background="red";
      //this指向this.bth[0]。想讓this指向實例對象,用bind
    }.bind(this)
    //用鏈式寫法,所以將實例對象返回
    return this;
  },
    //圓點的點擊按鈕事件
    yuan:function(){
      //因為事件中的點擊需要用到this,所以不能用bind,只能提前聲明一個this
      var that=this;
      //利用for循環得到原點的事件;
      for(var i=0;i<this.lis.length;i++){
        //添加一個索引的屬性
        this.lis[i].index=i;
        this.lis[i].onclick=function(){
          //that代表實例對象,this代表 this.lis[i]
          //通過for循環將圖片隱藏和原點的默認原色
          for(var j=0;j<that.lis.length;j++){
            that.lis[j].style.background="#ccc";
            that.divs[j].style.display="none";
          }
          //將點擊的原點顏色變紅,圖片顯示出來
          this.style.background="red";
          that.divs[this.index].style.display="block";
          //將num和圓點點擊後的索引匹配
          that.num=this.index;
        }
      }
      return this;
      }

    }
    var lunbo=new Person(slide)
    lunbo.ding().over().out().bthclick().yuan()
  </script>

  曾經美國有個案例:某公司一個程序員槍擊了他的4個同事,原因就是沒有寫註釋,希望大家可以借鑒哈

面向對象的輪播js