---恢复内容开始---

 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 }
10 Tab.prototype.init = function(){
11 var _this = this;
12 for(var i=0;i<this.aBtn.length;i++){
13 this.aBtn[i].index = i;
14 this.aBtn[i].onclick=function(){
15 _this.iNow = this.index;
16 _this.tab();
17 };
18 }
19 };
20 Tab.prototype.tab = function(){
21 for(var i=0;i<this.aBtn.length;i++){
22 this.aBtn[i].className='';
23 this.aDiv[i].className='';
24 }
25 this.aBtn[this.iNow].className='on';
26 this.aDiv[this.iNow].className='on';
27 };

  

JS 基于面向对象的 轮播图1的更多相关文章

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

    <script> // 函数不能重名, --> 子函数 // is defined function --> 函数名是否写错了 function AutoTab(id) { T ...

  2. 基于css制作轮播图的部分效果

    在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将 ...

  3. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

  4. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  5. js访3d上下轮播图

    js/css访3d上下轮播图 (附件) <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  6. 基于skitter的轮播图炫酷效果,幻灯片的体验

    概述 包含各种炫酷的轮播切换效果,插件小巧,与其他插件无冲突,可用于移动端和PC端 详细 代码下载:http://www.demodashi.com/demo/11939.html 你还在用原生的js ...

  7. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  8. JS框架_(Bootstrap.js)实现简单的轮播图

    Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...

  9. 原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

随机推荐

  1. 编译spock proxy

    今天把spock proxy编译通过并且运行了.大家如果在编译这款类似于MySQL proxy的软件遇到问题时,可以联系我.微信onesoft007

  2. css读书笔记3:定位元素

    定位元素要掌握css技术,核心就是要掌握元素定位. 一般把下面这条规则作为所有css样式表的第一条,初始化所有元素的内边距和外边距都为0: * {padding:0;margin:0;} 盒模型浏览器 ...

  3. html5中插入视频和音频

    <audio src="1.mp3" controls></audio> <video src="1.mp4" controls& ...

  4. hdu 2570

    贪心的经典题型 该死的精度问题,WA了好几次,以后能用乘的绝不用除!! #include<iostream> #include<algorithm> #include<c ...

  5. robotframework笔记10

    循环和条件 for循环 *** Settings *** Library BuiltIn Library Collections *** Test Cases *** TestCase01 My Ke ...

  6. div中字垂直居中对齐

    div中的文本水平居中,一般都是用text-align:center;就可以解决,那么垂直居中呢,知道vertiacl-align:middle;但有时候却不起作用:整理下div中文本垂直居中对齐的问 ...

  7. 用过的正则(更新ing)

    http://www.debuggex.com/   这个很好用20120912 //十六进制颜色值的正则表达式 var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6} ...

  8. 无法启动T-SQL 调试

    问题详情 解决办法 1.要在服务器本机,不要远程 2.用实例名,不要用.或者local 3.以Windows身份验证的administrator或者sqlserver身份验证的sa登录

  9. form程序的界面修改

    做主题视频库的界面的修改工作,是b/s端的窗口,是由form窗口生成,如下截图: 主要有三个方面,1.左侧菜单栏宽度固定,不随整个窗口大变化而变化.2.导出excel按钮的位置的移动,不管整个窗口是变 ...

  10. Div样式查看器

    编写div属性时,经常需要尝试不同的样式,可以用Javascript写一个简单的div样式查看器,方便日常操作: <!DOCTYPE html> <html> <head ...