<script>

// 函数不能重名, --> 子函数
// is defined function --> 函数名是否写错了
function AutoTab(id) {
Tab.apply(this, arguments);
this.timer = null;
this.inits();
// this.autoPlay();
} AutoTab.prototype = new Tab();
AutoTab.prototype.constructor = AutoTab; // 初始化
AutoTab.prototype.inits = function () {
this.play();
this.over();
this.out();
}; // 自动播放
AutoTab.prototype.play = function(){
var _this = this;
this.timer = setInterval(function(){
_this.iNow++;
if(_this.iNow==_this.aBtn.length){
_this.iNow = 0;
}
_this.tab();
},1000);
};
// 停止
AutoTab.prototype.stop = function () {
clearInterval(this.timer);
};
// 鼠标经过
AutoTab.prototype.over = function () {
var _this = this;
this.oBox.onmouseover = function () {
_this.stop();
};
};
// 鼠标离开
AutoTab.prototype.out = function () {
var _this = this;
this.oBox.onmouseout = function () {
_this.play();
};
}; window.onload=function(){
new Tab('tab1');
new AutoTab('tab2');
}; </script>

  

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

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

    ---恢复内容开始--- 1 'use strict' 2 function Tab(id){ 3 if(!id)return; 4 this.oBox = document.getElementBy ...

  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. Facade 运行机制

    举一个常见的例子在routes.php路由文件中的Route就是使用了laravel的Facade; config/app.php 文件中的aliases数组: 再例如其中的mail: 里面只是简单的 ...

  2. WPF: DatePicker

    获取DatePicker:date_Start上显示的时间date_Start.SelectedDate 比较两个dateTime类型的时间: DateTime StartDate =Convert. ...

  3. Scala学习之: Hello Word!

    scala 是一门纯粹的面向对象的语言 , 结合了python和java的优点. 它和java的集合度很高,是一个在JVM上运行的非java语言(PS 其实scala也是用java编写的) 安装sca ...

  4. mysql的小知识点(关于数据库的导入导出 对于windows)

    对于,一个存在的数据,我们该如何去打包成.sql属性的文件呢? 直接进行这两条语句: D:\Program Files\MySQL\mysql\bin>mysqldump -u root -p ...

  5. 批量Load/Store指令的寻址方式

    批量Load/Store指令用于实现在一组寄存器和一块连续的内存单元之间传输数据.也称为多寄存器寻址方式,即一条指令可以完成多个寄存器值的传送.这种寻址方式可以用一条指令最多完成传送16个通用寄存器的 ...

  6. Spring配置文件解析--依赖注入

    1.构造器注入基于构造器的DI通过调用带参数的构造器来实现,每个参数代表着一个依赖.此外,还可通过给stattic工厂方法传参数来构造bean.构造器参数解析根据参数类型进行匹配,如果bean的构造器 ...

  7. iOS开发UIScrollView的底层实现

    起始 做开发也有一段时间了,经历了第一次完成项目的激动,也经历了天天调用系统的API的枯燥,于是就有了探索底层实现的想法. 关于scrollView的思考 在iOS开发中我们会大量用到scrollVi ...

  8. [转载]ME51n,ME52n,ME53n屏幕增强

    原文地址:ME51n,ME52n,ME53n屏幕增强作者:cyzhang811 http://blog.sina.com.cn/s/blog_721b218c0100zch9.html 使用增强:ME ...

  9. urlencode在url中的作用

    urlencode编码能解决特殊字符的传输问题. 使用urlencode主要用于正常识别输入的汉字.空格以及其他特殊字符. 列如: 一产品名称为A&T Plastic,在产品列表中就产生了这样 ...

  10. JAVA-数据库连接【转】

    SqlServer.Oracle.MySQL的连接,除了地址和驱动包不同,其他都一样的. 1 public String urlString="jdbc:sqlserver://localh ...