JS 基于面向对象的 轮播图2

时间:2023-02-11 18:04:06
<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 &plus;js&plus;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框架&lowbar;&lpar;Bootstrap&period;js&rpar;实现简单的轮播图

    Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...

  9. 原生js写一个无缝轮播图插件&lpar;支持vue&rpar;

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

随机推荐

  1. 安装中文版cacti监控华为交换机流量并实现95计费

    摘要:一. 装置yum源: 以网易yum源为例 1. 下载repo文件 下载地点:http://mirrors.163.com/.help/CentOS6-Base-163.repo 2.备份并调换体 ...

  2. etc&sol;profile和&sol;etc&sol;environment的比较

    转自:http://andy136566.iteye.com/blog/1025338 先将export LANG=zh_CN加入/etc/profile ,退出系统重新登录,登录提示显示英文.将/e ...

  3. C&num;计算程序执行速度

    long t1 = DateTime.Now.Ticks; //执行程序,例如处理100个文件 long t2 = DateTime.Now.Ticks; Response.Write("执 ...

  4. &lbrack;BZOJ 1150&rsqb; &lbrack;CTSC2007&rsqb; 数据备份Backup 【贪心 &plus; 链表】

    题目链接:BZOJ - 1150 题目分析 可以看出,我们选的 k 条边一定是相邻两点之间的线段.我们可以将每条边看成一个点,那么我们就是要在 n-1 个点中选出互不相邻的 k 个,使它们的和最小. ...

  5. View的工作原理&lpar;一&rpar;——Measure

    一.认识ViewRoot和DecorView 当Activity对象被创建的时候,会将DecorView添加到Window中,同时创建ViewRootImpl对象(ViewRoot对应于ViewRoo ...

  6. Yii的场景

    先上代码 class User extends CActiveRecord{    public function rules()    {        return array(          ...

  7. 基于Consul的数据库高可用架构【转】

    几个月没有更新博客了,已经长草了,特意来除草.本次主要分享如何利用consul来实现redis以及mysql的高可用.以前的公司mysql是单机单实例,高可用MHA加vip就能搞定,新公司mysql是 ...

  8. 关于IT个人看法

    对于理科生来说,理论和技术都是相当重要的,我很爱钻牛角尖,但是请理解‘固执的我’, 本人选择IT行业,其实也是偶然,带着质疑的眼光,成为了众多IT男中毫无‘特色’的一员,回忆 学习阶段,逐渐认识了IT ...

  9. 容斥 &plus; 组合数学 ---Codeforces Round &num;317 A&period; Lengthening Sticks

    Lengthening Sticks Problem's Link: http://codeforces.com/contest/571/problem/A Mean: 给出a,b,c,l,要求a+x ...

  10. 谷歌被墙后,能够搜索的ip地址

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/langresser/article/details/32339707 http://209.116. ...