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

 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. 部署git服务器 gitServer 软件

    部署git服务器 gitServer 软件 搭建git服务器也并不是非常的难,有这么多优秀的软件,选择一个适合自己就行了 1. windows版本 http://gitstack.com/ 免费版本, ...

  2. 【转】 Linux进程间通信

    一.进程间通信概述进程通信有如下一些目的:A.数据传输:一个进程需要将它的数据发送给另一个进程,发送的数据量在一个字节到几M字节之间B.共享数据:多个进程想要操作共享数据,一个进程对共享数据的修改,别 ...

  3. java 对象 Serializable注意事项

    在序列化时,有几点要注意的: 1:当一个对象被序列化时,只保存对象的非静态成员变量,不能保存任何的成员方法和静态的成员变量. 2:如果一个对象的成员变量是一个对象,那么这个对象的数据成员也会被保存. ...

  4. Sudoku Solver [LeetCode]

    Write a program to solve a Sudoku puzzle by filling the empty cells. Empty cells are indicated by th ...

  5. SAP客户标准信用额度修改和创建

    好吧,前提要说一下,信贷是到客户的信贷范围级别的. FUNCTION zfm_credit. *"---------------------------------------------- ...

  6. 转python编码问题

    python的编码问题 http://blog.csdn.net/fuadam/article/details/5547504 分类: .net以外的东东 2010-04-30 21:16 747人阅 ...

  7. web自定义控件UserControl

    今天做了两个自定义控件,之前用WPF也做过,但是感觉跟今天的不太一样.首先是在项目中建了一个UserContral的控件界面,把需要的控件拖到里面,再给按钮添加事件.我们公司的控件都是买的Dev Ex ...

  8. go局部变量的存储空间是堆还是栈?

    编译器会自动选择在栈上还是在堆上分配局部变量的存储空间,但可能令人惊讶的是,这个选择并不是由用var还是new声明变量的方式决定的. var global *int func f() { var x ...

  9. EF Code First 学习笔记:关系

      一对多关系 项目中最常用到的就是一对多关系了.Code First对一对多关系也有着很好的支持.很多情况下我们都不需要特意的去配置,Code First就能通过一些引用属性.导航属性等检测到模型之 ...

  10. ubuntu 软件安装的几种方法

    说明:由于图形化界面方法(如Add/Remove... 和Synaptic Package Manageer)比较简单,所以这里主要总结在终端通过命令行方式进行的软件包安装.卸载和删除的方法. 一.U ...