面向对象的轮播js

  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个同事,原因就是没有写注释,希望大家可以借鉴哈

原文地址:https://www.cnblogs.com/shangjun6/p/10240789.html

时间: 2024-11-08 20:30:33

面向对象的轮播js的相关文章

面向对象 实现轮播组件

以面向对象的方式实现无线轮播效果组件预览地址:https://evenyao.github.io/carousel-jQuery/ 逻辑图 我们的demo轮播为四张图,如有多张图,逻辑是一样的 当初始化之前,CSS中如果撤除 overflow: hidden; ,即可看到该样式,即四张图排列在一起(此时容器的宽度已经通过JS计算得到) 初始化之后,在第1张图之前添加一张图4,在第4张图之后添加一张图1(即最后一张图添加第一张图,第一张图添加最后一张图) 当 nextBtn 被点击的时候,向右移

前端设计——图片轮播js实现

1.网页结构如图所示 2.页面布局设计细节 ①分块:一个小方块是一个div. ②无序列表一般是竖直排放的,可以通过float让其水平排放.float:left; ③三个小方块是浮动上去的,所以要用到position定位.A盒子要相对B盒子进行移动,那么B盒子就设置为relative,A盒子要设置为absolute.这样才能让其进行相对移动.距离的调节,使用top  bottom   left  right  去调节A到合适的位置.如果要垂直居中可以使用{top:50%和margin-top:-A

JS 基于面向对象的 轮播图2

<script> // 函数不能重名, --> 子函数 // is defined function --> 函数名是否写错了 function AutoTab(id) { Tab.apply(this, arguments); this.timer = null; this.inits(); // this.autoPlay(); } AutoTab.prototype = new Tab(); AutoTab.prototype.constructor = AutoTab; /

JS 基于面向对象的 轮播图1

---恢复内容开始--- 1 'use strict' 2 function Tab(id){ 3 if(!id)return; 4 this.oBox = document.getElementById(id); 5 this.aBtn = this.oBox.getElementsByTagName('input'); 6 this.aDiv = this.oBox.getElementsByTagName('div'); 7 this.iNow = 0; 8 this.init(); 9

图片轮播 js jquery

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> /**********总体布局**************/ *{margin:0; padding:0; border:0;} body{">rg

图片轮播 js代码

1 <script type="text/javascript"> 2 //图片轮换 3 $(function () { 4 //------------------ 5 var sWidth = 980; //获取焦点图的宽度(显示面积) 6 var sHeight = 90; //获取焦点图的高度 7 var timeInterval = 3000; //获取间隔时间 8 var len = $("#focus ul li").length; //获

大图轮播js

<!DOCTYPE html><html> <head>        <meta charset="UTF-8">        <title></title>        <style>            * {                margin: 0px;                padding: 0px;            }                      

轮播JS思路

<script> $(document).ready(function() {   aa(); }) </script> <script> var i=-1 function aa(){     i++     if(i==4){i=0}     $('.tab_nav ul li').eq(i).addClass('cur').siblings().removeClass('cur');     $('.list_box').hide().eq(i).show();

如何用面向对象的思维去封装一个小型轮播图插件

1.面向对象与面向过程 既然说到面向对象的思维,那就免不了要对面向过程的编程思维与面向对象的思维做一番比较. 笔者有 一段时间天真的认为有一个类,然后new一个对象就是面向对象编程了,现在想想还是太naive了呀. 其实面向对象的编程思维和面向过程的编程思维重要的不是对象和过程,而是思维. 比如说在生活中我们要做一道西红柿炒鸡蛋,很多人的第一反应就是西红柿炒鸡蛋第一步.第二步.第三步应该怎么做,每一步放什么调料.然后在做的过程中找每一步需要的调料.这就是很典型的面向过程的思维方式:怎么做,需要什