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布局,所以没有使 ...
随机推荐
- GreenPlum简单性能测试与分析
版权声明:本文由黄辉原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/195 来源:腾云阁 https://www.qclou ...
- 在ubuntu下真机调试android程序出现设备没有访问权限
今天把android的开发环境从windows平台切换到了ubuntu上. java jdk android-adt android-ndk都下好,环境变量都配好之后, 在调试程序的时候,出现设备没有 ...
- js将html5日期格式转为long型
var moveInArray = $("#move_in").val().split('-'); var d = new Date(); d.setYear(moveInArra ...
- python 练习 2
#!/usr/bin/python # -*- coding: utf-8 -*- from random import shuffle class caigame: win=False flag=F ...
- 【转】Linux下XenServer管理工具安装
转载文章 - Linux下XenServer管理工具安装 Xen-Server 6.5 虚拟机安装Linux系统 vmware安装ubuntu12.04嵌套安装xen server(实现嵌套虚拟化) ...
- $('#checkbox').attr('checked'); 返回的是checked或者是undefined解决办法
$('#checkbox').attr('checked'); 返回的是checked或者是undefined解决办法 <input type='checkbox' id='cb'/> ...
- hdu---(4515)小Q系列故事——世界上最遥远的距离(模拟题)
小Q系列故事——世界上最遥远的距离 Time Limit: 500/200 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)T ...
- hdu-------1081To The Max
To The Max Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
- Excel中连接函数CONCATENATE()
直接API: CONCATENATE 函数语法具有下列参数 (参数:为操作.事件.方法.属性.函数或过程提供信息的值.): Text1 必需. 要连接的第一个文本项. Text2, ... 可选. 其 ...
- cisco LAN
由于实验需要,需要搞个内部局域网(以前我们实验室是直接从学校拖了根线过来,然后直接用switch连).因此得先配个router,做个小局域网.由于从没接触过路由器,所以先去网上找了些资料,接着就打开c ...