面向对象的拖拽
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>无标题文档</title>
- <style>
- #div1 div,#div2 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
- .active{ background:red;}
- </style>
- <script>
- /*var arr = [4,7,1,3];
- arr.sort(); // 1 3 4 7
- var arr2 = [4,7,1,3];
- arr2.push(5);
- arr2.sort(); // 1 3 4 5 7
- */
- 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>
- </head>
- <body>
- <div id="div1">
- <input class="active" type="button" value="1">
- <input type="button" value="2">
- <input type="button" value="3">
- <div style="display:block">11111</div>
- <div>22222</div>
- <div>33333</div>
- </div>
- <div id="div2">
- <input class="active" type="button" value="1">
- <input type="button" value="2">
- <input type="button" value="3">
- <div style="display:block">11111</div>
- <div>22222</div>
- <div>33333</div>
- </div>
- </body>
- </html>