<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>原生js面向对象编程-选项卡(自动轮播)</title>
<style>
#div1 div{
width:400px;
height:300px;
border:1px solid #ccc;
overflow: hidden;
display: none;
margin: 15px 0;
}
#div1 input{
color: #fff;
width:100px;
height:40px;
background: darkseagreen;
border:none;
font-size: 14px;
letter-spacing: 5px;
}
#div1 p{
font-size: 20px;
line-height: 24px;
text-align: center;
color:darkgreen;
}
#div1 .title{
padding: 0;
font-weight: bold;
}
#div1 .active{
background:sandybrown;
color:#fff;
}
</style>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="五言律诗">
<input type="button" value="七言律诗">
<input type="button" value="五言绝句">
<input type="button" value="七言绝句">
<div style="display: block;">
<p class="title">落 花</p>
<p class="author">李商隐</p>
<p>高阁客竟去,小园花乱飞。</p>
<p>参差连曲陌,迢递送斜晖。</p>
<p>肠断未忍扫,眼穿仍欲归。</p>
<p>芳心向春尽,所得是沾衣。</p>
</div>
<div>
<p class="title">蜀 相</p>
<p class="author">杜甫</p>
<p>丞相祠堂何处寻,锦官城外柏森森。</p>
<p>映阶碧草自春色,隔叶黄鹂空好音。</p>
<p>三顾频烦天下计,两朝开济老臣心。</p>
<p>出师未捷身先死,长使英雄泪满襟。</p>
</div>
<div>
<p class="title">八阵图</p>
<p class="author">杜甫</p>
<p>功盖三分国,名成八阵图。</p>
<p>江流石不转,遗恨失吞吴。</p>
</div>
<div>
<p class="title">泊秦淮</p>
<p class="author">杜牧</p>
<p>烟笼寒水月笼沙,夜泊秦淮近酒家。</p>
<p>商女不知亡国恨,隔江犹唱后庭花。</p>
</div>
</div> <script type="text/javascript">
window.onload = function(){ function Tab(id){
this.wrap = document.getElementById(id);
this.inp = this.wrap.getElementsByTagName('input');
this.div = this.wrap.getElementsByTagName('div');
this.num = 0;
this.timer = null;
} Tab.prototype = {
constructor : Tab,
init : function(){
var This = this;
this.auto();
this.wrap.onmouseover = function(){
clearInterval(This.timer);
};
this.wrap.onmouseout = function(){
This.auto();
};
},
auto:function(){
var _this = this;
this.timer = setInterval(function(){
_this.num ++;
_this.num %= _this.inp.length; for(var i=0;i<_this.inp.length;i++){
_this.inp[i].className = '';
_this.div[i].style.display = 'none';
}
_this.inp[_this.num].className = 'active';
_this.div[_this.num].style.display = 'block'; },2000);
}
}
var t = new Tab('div1');
t.init();
}
</script> </body>
</html>

原生js面向对象编程-选项卡(自动轮播)的更多相关文章

  1. 原生js面向对象编程-选项卡(点击)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. 原生JS简单的无缝自动轮播

    最近在不断的加强巩固js.在学习jq和vue之后发现很多东西其实都是不明所以,有些底层的东西自己不懂,到头来也只是一昧的使用,一直在用别人的东西,对自己的成长帮助也不大. 万丈高楼平地起,基础打扎实了 ...

  3. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  4. js原生设计模式——3简单工厂模式\js面向对象编程实例

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  5. 原生js实现tab选项卡里内嵌图片滚动特效代码

    <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...

  6. JS面向对象编程(进阶理解)

    JS 面向对象编程 如何创建JS对象 JSON语法声明对象(直接量声明对象) var obj = {}; 使用 Object 创建对象 var obj = new Object(); JS对象可以后期 ...

  7. 带你一分钟理解闭包--js面向对象编程

    上一篇<简单粗暴地理解js原型链--js面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...

  8. Js面向对象编程

    Js面向对象编程 1.     什么是面向对象编程? 我也不说不清楚什么是面向对象,反正就那么回事吧. 编程有时候是一件很快乐的事,写一些小游戏,用编程的方式玩游戏等等 2.     Js如何定义一个 ...

  9. 页面循环绑定(变量污染问题),js面向对象编程(对象属性增删改查),js字符串操作,js数组操作

    页面循环绑定(变量污染问题) var lis = document.querySelectorAll(".ul li") for ( var i = 0 ; i < lis. ...

随机推荐

  1. landi pos机

    2015年3月:联迪商用获得2014-2015中国金融POS机市场年度成功企业奖: 2014年5月:联迪商用入选2013年福州市纳税百强企业: 2013年12月:联迪商用入选2013年度中国电子商务物 ...

  2. tensorflow -gpu安装,史上最新最简单的途径(不用自己装cuda,cdnn)

    tensorflow -gpu安装首先,安装Anoconda1. 官网下载点我: 2.安装 点击 python 3.6 version自动下载x64版,下载好之后,然后安装. 如图,打上勾之后,一路n ...

  3. H3C HDLC状态检测

  4. java线程与进程的比较

    线程具有许多传统进程所具有的特征,故又称为轻型进程(Light—Weight Process)或进程元:而把传统的进程称为重型进程(Heavy—Weight Process),它相当于只有一个线程的任 ...

  5. Python--day44--navicat使用(知道怎么用就好,要用终端操作,用这个会被人鄙视)

  6. $_GET $_POST $_REQUEST

    <form action="__APP__/View/editArticle?id=5" method="GET"> <form>表单提 ...

  7. H3C H3C设备DNS功能实现

  8. 51nod 1281山峰和旗子

    1281 山峰和旗子  题目来源: Codility 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 用一个长度为N的整数数组A,描述山峰和山谷的高度.山峰需要满足 ...

  9. vue-learning:21 - js - mixins

    mixins 混入是一种对重复代码的组织方式,可以在多个组件间复用代码. 如果在项目中,在多个组件间有一段逻辑代码是共同的.那常见的处理方式是: 每个组件都复制粘贴代码(显然这是最不好方式) 将以共同 ...

  10. Android SDK目录具体结构及Android源码的具体结构

    Android SDK目录具体结构 1. add-ons:这里面保存着附加库,比如Google Maps,当然你如果安装了OphoneSDK,这里也会有一些类库在里面. 2. docs:这里面是And ...