<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. 【bzoj1037】生日聚会

    bzoj1037 题意 \(n\)个男孩,\(m\)个女孩,共\(n+m\)个排成一排. 要求对于任意连续的一段,男孩与女孩的数目之差不超过\(k\). 求排列的方案数. \(1\leq n,m\le ...

  2. python 练习 27

    ython continue 语句跳出本次循环,而break跳出整个循环. continue 语句用来告诉Python跳过当前循环的剩余语句,然后继续进行下一轮循环. continue语句用在whil ...

  3. FireFox背景亮度修改

    安装stylish 输入:body{filter: brightness(80%);}

  4. HTML5自学笔记[ 11 ]canvas绘图基础1

    html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...

  5. 如何使用Vbox添加虚拟机

    简介 :vbox是oracle旗下的一个免费的虚拟机软件. 个人感觉操作方便,至少比VM要好用的多. 如果有已经制作好的 点击下一步: 下一步 找到之后 创建 look

  6. OC 类别(分类)Categroy

    Categroy类别,又称为扩展类,在类的原基础上扩展方法,且不可添加变量,如果扩展的方法与原始类中的方法相同,则会隐藏原始方法,且不可在扩展方法中通过super调用原始方法,这里与继承不同. 定义: ...

  7. wait(), notify(),sleep详解

    在JAVA中,是没有类似于PV操作.进程互斥等相关的方法的.JAVA的进程同步是通过synchronized()来实现的,需要说明的是,JAVA的synchronized()方法类似于操作系统概念中的 ...

  8. spring之初识Ioc&Aop

    Spring框架的作用 spring是一个轻量级的企业级框架,提供了ioc容器.Aop实现.dao/orm支持.web集成等功能,目标是使现有的java EE技术更易用,并促进良好的编程习惯. Spr ...

  9. JavaScript学习——判断数据类型总结(转)

    一.JS中的数据类型 1.数值型(Number):包括整数.浮点数. 2.布尔型(Boolean) 3.字符串型(String) 4.对象(Object) 5.数组(Array) 6.空值(Null) ...

  10. Windows Store App 用户库文件操作

    (1)获取用户库位置 如果想要通过应用程序在用户库中创建文件,首先需要获得用户库中指定的位置,例如图片库.文档库等.这里值得注意的是,在获取用户库的位置之前,必须在Windows应用商店项目的清单文件 ...