js 面向对象选项卡

 

js 面向对象选项卡

<!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>

你可能感兴趣的:(面向对象)