JS 基于面向对象的 轮播图2
<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的更多相关文章
- JS 基于面向对象的 轮播图1
---恢复内容开始--- 1 'use strict' 2 function Tab(id){ 3 if(!id)return; 4 this.oBox = document.getElementBy ...
- 基于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布局,所以没有使 ...
随机推荐
- 在Ubuntu 14 上安装 Nginx-RTMP 流媒体服务器
一:RTMP RTMP流媒体协议是 一套 Adobe 开发的音频视频实时传输协议: 二:Nginx-rtmp nginx-rtmp 是一个基于nginx的 RTMP服务模块,开源,免费 https:/ ...
- Node.js 开发模式(设计模式)
Asynchronous code & Synchronous code As we have seen in an earlier post (here), how node does th ...
- Sql Server聚集索引创建
create CLUSTERED index IX_ZhuiZIDList_ZID on ZhuiZIDList (ZID)
- avatar Logo
用日志打印出自己的头像logo import java.io.File; import java.io.FileInputStream; import java.io.IOException; imp ...
- hdu---1024Max Sum Plus Plus(动态规划)
Max Sum Plus Plus Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- tableviewcell边距和设置值不符
解决方法: 将Table View Cell的Layout Margins由Default改为Explicit,然后修改上下左右的边距.
- Java 集合系列 16 HashSet
java 集合系列目录: Java 集合系列 01 总体框架 Java 集合系列 02 Collection架构 Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例 Java ...
- 图形界面报错“已拒绝X11转移申请”的解决方法
今天想通过本机给虚拟机起x-manager图形界面的时候报出 解决办法: 1.原来X11 forwarding依赖“xorg-x11-xauth”软件包,所以必须先安装“xorg-x11-xauth” ...
- fwite写入文件
用双引号(")定义字符串,PHP 懂得更多特殊字符的转义序列: 转移序列 说明 \n 换行 \r 回车 \t 水平制表符 \[/td> 反斜线 \$ 美元符号 \" 双引号 ...
- hdu 4631 Sad Love Story
http://acm.hdu.edu.cn/showproblem.php?pid=4631 没想到这道题需要用“平均时间复杂度” 计算 一直没有想到解法 因为不符考虑了最坏情况的理念 方法一: ...