<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

*{ margin:0; padding:0;}

#box{ width:500px; height:400px; margin:20px auto;  position:relative;}

#div1,#div2{  position:absolute; top:0; }

#div1 div,#div2 div{ width:200px; height:300px; border:1px #999 solid; display:none; text-align:center; color:#fff;}

#div1 input,#div2 input{ width:62px; height:30px; border:0; color:#fff; background:#333; margin-bottom:2px; }

.active{ background:red !important;}

.bk0{ background:url(../../images/TaylorSwift.jpg) no-repeat center center/contain;}

.bk2{ background:url(../../images/TaylorSwift3.jpg) no-repeat center center/contain;}

.bk3{ background:url(../../images/TaylorSwift4.jpg) no-repeat center center/contain;}

</style>

</head>

<body>

<script>

	  window.onload=function(){

		  var t1=new  Tab('div1');

		 // t1.init();  

		  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;

		  this.init();  // init 可以直接写在这里 new时候自动初始化

		  }

	  Tab.prototype.init=function(){

		var that=this;

		 for(var i=0;i<this.aInput.length;i++){

			 this.aInput[i].index=i;

			 this.aInput[i].onclick=function(){

				 that.change(this);

				 };

			 }

	   }// init end

	    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';

		}//change

	     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';

			 },3000);

		 }

</script>

<div id="box">

    <div id="div1">

        <input class="active" type="button" value="1">

        <input type="button" value="2">

        <input type="button" value="3">

        <div style="display:block"  class="bk0">11111</div>

        <div class="bk3">22222</div>

        <div class="bk2">33333</div>

    </div>

    <div id="div2" style="right:0 !important">

        <input class="active" type="button" value="1">

        <input type="button" value="2">

        <input type="button" value="3">

        <div style="display:block" class="bk3">第二个的1111</div>

        <div class="bk0">第二 222</div>

        <div class="bk2">第二个33333</div>

    </div>

</div>

</body>

</html>

js 面向对象选项卡的更多相关文章

  1. js面向对象选项卡

    window.onload=function() //面向对象 { var tab=new tabSwitch("div1"); var tab=new tabSwitch(&qu ...

  2. 手写js面向对象选项卡插件

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  3. 原生js面向对象编程-选项卡(点击)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. js面向对象+一般方法的选项卡

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 原生js面向对象编程-选项卡(自动轮播)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. 第十五节 JS面向对象实例及高级

    实例:面向对象的选项卡 把面向过程的程序,改写成面向对象的形式 原则:不能有函数套函数,但可以有全局变量 过程: onload —— 改写成 构造函数,其中window.onload的功能是在页面加载 ...

  7. js面向对象、创建对象的工厂模式、构造函数模式、原型链模式

    JS面向对象编程(转载) 什么是面向对象编程(OOP)?用对象的思想去写代码,就是面向对象编程. 面向对象编程的特点 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有对象上继承出新的对象 ...

  8. ES6学习笔记（三）：教你用js面向对象思维来实现 tab栏增删改查功能

    前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...

  9. JS面向对象介绍

    JS面向对象介绍 首先面向对象是什么?为什么要使用面向对象. 因为JavaScript对每个创建的对象都会自动设置一个原型(谷歌火狐中是proto),指向它的原型对象prototype,举个例子: f ...

随机推荐

  1. Windows Phone开发（38）：动画之PointAnimation

    原文:Windows Phone开发(38):动画之PointAnimation PointAnimation也是很简单的,与前面说到的两个Animation是差不多的,属性也是一样的,如By.Fro ...

  2. Android正在使用Handler实现信息发布机制（一）

    上一篇文章,我们谈到了电话Handler的sendMessage方法,最后,我们将进入一个电话 sendMessageAtTime方法,例如下列: public boolean sendMessage ...

  3. Uva562(dp)

    给我们n个硬币 每个硬币都有它的面值,要我我们分为两堆硬币,使得硬币的差值最小 我们可以dp计算出所有的差值,然后从小到大枚举差值,如果差值存在,就输出 dp[i][j] 表示对于前i件物品能达到差值 ...

  4. RedGate 工具SQLTEST 1.0.15.1

    原文:RedGate 工具SQLTEST 1.0.15.1 RedGate 工具SQLTEST 1.0.15.1 SQL TEST1.0.15.1的破解可以参考这篇文章:http://www.cnbl ...

  5. Spring与Hibernate整合中，使用OpenSessionInViewFilter后出现sessionFactory未注入问题

    近期在知乎看到一句话,保持学习的有一种是你看到了很多其它的牛人,不甘心,真的不甘心. Spring和hibernate整合的时候,jsp页面做展现,发现展现属性出现: org.apache.jaspe ...

  6. POJ 3450 Corporate Identity KMP解决问题的方法

    这个问题,需要一组字符串求最长公共子,其实灵活运用KMP高速寻求最长前缀. 请注意,意大利愿父亲:按照输出词典的顺序的规定. 另外要提醒的是:它也被用来KMP为了解决这个问题,但是很多人认为KMP使用 ...

  7. 建立Hibernate二级Cache

    建立Hibernate二级Cache它需要两个步骤:首先,一定要使用什么样的数据并发策略,然后配置缓存过期时间,并设置Cache提供器. 有4种内置的Hibernate数据并发冲突策略,代表数据库隔离 ...

  8. 深度分析 Java 的枚举类型：枚举的线程安全性及序列化问题（转）

    写在前面: Java SE5 提供了一种新的类型 Java的枚举类型,关键字 enum 可以将一组具名的值的有限集合创建为一种新的类型,而这些具名的值可以作为常规的程序组件使用,这是一种非常有用的功能 ...

  9. Codeforces Round #256 (Div. 2) A. Rewards

    A. Rewards time limit per test 1 second memory limit per test 256 megabytes input standard input out ...

  10. flex4 一些项目使用的技术

    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...