<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. 在Ubuntu 14 上安装 Nginx-RTMP 流媒体服务器

    一:RTMP RTMP流媒体协议是 一套 Adobe 开发的音频视频实时传输协议: 二:Nginx-rtmp nginx-rtmp 是一个基于nginx的 RTMP服务模块,开源,免费 https:/ ...

  2. Node.js 开发模式(设计模式)

    Asynchronous code & Synchronous code As we have seen in an earlier post (here), how node does th ...

  3. Sql Server聚集索引创建

    create CLUSTERED index IX_ZhuiZIDList_ZID on ZhuiZIDList (ZID)

  4. avatar Logo

    用日志打印出自己的头像logo import java.io.File; import java.io.FileInputStream; import java.io.IOException; imp ...

  5. hdu---1024Max Sum Plus Plus(动态规划)

    Max Sum Plus Plus Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  6. tableviewcell边距和设置值不符

    解决方法: 将Table View Cell的Layout Margins由Default改为Explicit,然后修改上下左右的边距.

  7. Java 集合系列 16 HashSet

    java 集合系列目录: Java 集合系列 01 总体框架 Java 集合系列 02 Collection架构 Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例 Java ...

  8. 图形界面报错“已拒绝X11转移申请”的解决方法

    今天想通过本机给虚拟机起x-manager图形界面的时候报出 解决办法: 1.原来X11 forwarding依赖“xorg-x11-xauth”软件包,所以必须先安装“xorg-x11-xauth” ...

  9. fwite写入文件

    用双引号(")定义字符串,PHP 懂得更多特殊字符的转义序列: 转移序列 说明 \n 换行 \r 回车 \t 水平制表符 \[/td> 反斜线 \$ 美元符号 \" 双引号 ...

  10. hdu 4631 Sad Love Story

    http://acm.hdu.edu.cn/showproblem.php?pid=4631 没想到这道题需要用“平均时间复杂度” 计算   一直没有想到解法  因为不符考虑了最坏情况的理念 方法一: ...