面向对象--控制多个选项卡自动播放
来源:互联网 发布:手机淘宝怎么上架商品 编辑:程序博客网 时间:2024/05/18 14:27
感受一些面向对象的好处:灵活
<script>window.onload = function(){ var t1 = new Tab('div1'); t1.init(); t1.autoPlay(); var t2 = new Tab('div2'); t2.init(); t2.autoPlay();};function Tab(id){ this.oParent = document.getElementById(id); this.aInput = this.oParent.getElementsByTagName('input'); this.aDiv = this.oParent.getElementsByTagName('div'); this.iNow = 0;}Tab.prototype.init = function(){ var This = this; for(var i=0;i<this.aInput.length;i++){ this.aInput[i].index = i; this.aInput[i].onclick = function(){ This.change(this); }; }};Tab.prototype.change = function(obj){ for(var i=0;i<this.aInput.length;i++){ this.aInput[i].className = ''; this.aDiv[i].style.display = 'none'; } obj.className = 'active'; this.aDiv[obj.index].style.display = 'block';};Tab.prototype.autoPlay = function(){ var This = this; setInterval(function(){ if(This.iNow == This.aInput.length-1){ This.iNow = 0; } else{ This.iNow++; } for(var i=0;i<This.aInput.length;i++){ This.aInput[i].className = ''; This.aDiv[i].style.display = 'none'; } This.aInput[This.iNow].className = 'active'; This.aDiv[This.iNow].style.display = 'block'; },2000); };</script>
阅读全文
0 0
- 面向对象--控制多个选项卡自动播放
- 面向对象及组件开发(九)控制多个选项卡自动播放
- JS 面向对象选项卡
- 选项卡面向对象写法
- 面向对象的选项卡
- 面向对象写选项卡
- 面向对象的选项卡
- js面向对象---选项卡
- 面向对象的选项卡
- 百度空间自动播放选项卡
- 面向对象选项卡(回头写个简单的小案例)
- 什么是面向对象?附带面向对象选项卡
- js使用面向对象实现选项卡
- JavaScript面向对象实例---tab选项卡
- js选项卡修改成面向对象
- 面向对象2--选项卡的改写
- 回顾面向对象-选项卡demo
- 基于面向对象的选项卡
- flask项目部署到阿里云服务器
- 光标实现为员工涨工资
- app弱网测试常用工具和测试策略
- 阿里云部署java环境(附:自动化部署脚本)
- PL/SQL光标之带参数光标
- 面向对象--控制多个选项卡自动播放
- PL/SQL例外概念和系统例外
- 百度地图调用及电子围栏设置
- spring-mybatis整合
- SystemUI导航栏全解析
- github代码仓创建及更新
- PL/SQL的No_data_found例外
- 移动硬盘在windows上用了之后在linux上不能访问
- JS将html导入excel方法