JS 基于面向对象的 轮播图1
---恢复内容开始---
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的更多相关文章
- JS 基于面向对象的 轮播图2
<script> // 函数不能重名, --> 子函数 // is defined function --> 函数名是否写错了 function AutoTab(id) { T ...
- 基于css制作轮播图的部分效果
在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将 ...
- js原生代码实现轮播图案例
一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...
- 用html +js+css 实现页面轮播图效果
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...
- js访3d上下轮播图
js/css访3d上下轮播图 (附件) <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
- 基于skitter的轮播图炫酷效果,幻灯片的体验
概述 包含各种炫酷的轮播切换效果,插件小巧,与其他插件无冲突,可用于移动端和PC端 详细 代码下载:http://www.demodashi.com/demo/11939.html 你还在用原生的js ...
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- JS框架_(Bootstrap.js)实现简单的轮播图
Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...
- 原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
随机推荐
- Sql Server中通配符的使用
Sql Server中通配符的使用 通配符_ "_"号表示任意单个字符,该符号只能匹配一个字符."_"可以放在查询条件的任意位置,且只能代表一个字符.一个汉字只 ...
- robotframework笔记20
配置执行 选择测试用例 机器人框架提供了几个选择的命令行选项 执行测试用例. 也工作在相同的选项 后处理输出与 Rebot . 通过测试套件和测试用例的名称 测试套件和测试用例可以选择通过他们的名字的 ...
- Qt之坐标系统
简述 坐标系统是由QPainter类控制的,再加上QPaintDevice和QPaintEngine类,就形成了Qt的绘图体系. QPainter:用于执行绘图操作. QPaintDevice:二维空 ...
- Runner站立会议之个人记录
备注: 为方便记录,此随笔每日更新(因会议在晚上开,所以将昨天今天改成了今天明天) 2016.4.19 站立会议 今天学习到了:文件创建,adt基本知识,分别在虚拟机和手机上运行软件 明天要:继续学 ...
- 根据采购/销售订单创建STO/SO
FUNCTION Z_SD_CREATE_DN. *"-------------------------------------------------------------------- ...
- python logger
[loggers] keys=root [handlers] keys=consoleHandler [formatters] keys=simpleFormatter [logger_root] l ...
- Introduction to Windows 8: The Definitive Guide for Developer
<Windows 8应用开发权威指南>介绍 Introduction to Windows 8: The Definitive Guide for Developer 一.封面设计要求及文 ...
- centos chkconfig 服务设置
chkconfig命令主要用来更新(启动或停止)和查询系统服务的运行级信息.谨记chkconfig不是立即自动禁止或激活一个服务,它只是简单的改变了符号连接. 使用语法:chkconfig [--ad ...
- was7中文redhat6上安装出现中文乱码解决方案
转:http://blog.csdn.net/w1985g/article/details/8789378 在rhel-server-6.1-x86_64上安装WebSphere 7时,安装界面出现中 ...
- Window["aaa"]这个在JS里是什么意思?
答案:定义一个全局的变量 aaa,这个的方式是数组,实际上是等于 window.aaa