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布局,所以没有使 ...
随机推荐
- android内存泄露小谈
在做android的时候,用的语言大部分情况下都是java.以前最开始做的是编译器开发, 大部分情况都是用c语言和x86与arm架构的汇编,后来接触到ios用的是OC.对比之下, 感觉还是java用起 ...
- noip2016题解汇总
[uoj#260]玩具谜题 传送门 http://uoj.ac/problem/260 分析 模拟. int n,m; int dir[N]; char nam[N][L]; int a[M],s[M ...
- jquery函数
1.ready函数 当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件. $(document).ready(function (){alert('11 ...
- jmeter笔记2
使用jmeter它来完成最常用的三种类型服务器,即 Web 服务器.数据库服务器和消息中间件,压力测试的方法.步骤以及注意事项. 讲到测试,人们脑海中首先浮现的就是针对软件正确性的测试,即常说的功能测 ...
- ARM流水线关键技术分析与代码优化
引 言 流水线技术通 过多个功能部件并行工作来缩短程序执行时间,提高处理器核的效率和吞吐率,从而成为微处理器设计中最为重要的技术之一.ARM7处理器核使用了典型三级流 水线的冯·诺伊曼结构,AR ...
- 解决li在ie,firefox中行高不一致问题
转载 http://www.cnblogs.com/jikey/archive/2011/11/13/2247543.html li在ie与firefox的高度是不一样的,解决办法是li font-s ...
- Java 集合系列 12 TreeMap
java 集合系列目录: Java 集合系列 01 总体框架 Java 集合系列 02 Collection架构 Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例 Java ...
- ArangoDB介绍——未知架构和底层原理
ArangoDB介绍 ArangoDB是一个开源NoSQL数据库,官网:https://www.ArangoDB.org/ArangoDB支持灵活的数据模型,比如文档Document.图Graph以及 ...
- VBA SQLServer 基本操作
读取MS SQL Server数据表数据,并将它保存到excel工作表中 Sub ReturnSQLrecord() 'sht 为excel工作表对象变量,指向某一工作表 Dim i As Int ...
- sql server中备份数据的几种方式
当我们在写sql脚本要对数据表中的数据进行修改的时候,为了防止破坏数据,通常在开发前都会对数据表的数据进行备份,当我们sql脚本开发并测试完成后,再把数据恢复回来. 目前备份数据,我常用的方法有以下几 ...