<!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. halcon坐标转换（机器人坐标转换用）

    #图像坐标r:=[431, 355, 507, 53, 507]c:=[505, 543, 316, 127, 883]#物理坐标(例如机器人坐标)r1:=[0, 2.0, -2.0, 10, -2. ...

  2. axis2 wsdl2java工具

    wsdl2java工具使用方法描述: C:\Users\Administrator>wsdl2java -h Using AXIS2_HOME: E:\Apache_Projects\axis2 ...

  3. gyp verb check python checking for Python executable "python2" in the PATH

    缺少python2.7支持 可快速使用以下语句完成安装 npm install --global --production windows-build-tools 到时候会自动下载python的 如果 ...

  4. Laravel修改配置后一定要清理缓存 "php artisan config:clear"！

    用laravel踩到一个大坑... 需要使用laravel的队列(queue)功能, 设置 ".env"配置文件 QUEUE_DRIVER=database 按照文档,建立jobs ...

  5. 2019-8-2-WPF-从文件加载字体

    title author date CreateTime categories WPF 从文件加载字体 lindexi 2019-08-02 17:10:33 +0800 2018-2-13 17:2 ...

  6. eclipse本地启动tomcat报错集锦

    1.eclipse本地添加tomcat服务器    打开Eclipse,单击“window”菜单,选择下方的“Preferences”: 找到Server下方的Runtime Environment, ...

  7. P1010 数值交换

    题目描述 输入两个数 \(a\) 和 \(b\) ,将两个数交换,并输出交换后的 \(a\) 和 \(b\) . 输入格式 输入两个整数 \(a,b(1 \le a,b \le 10^6)\) 输出格 ...

  8. 51nod 1281山峰和旗子

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

  9. jquery银行电子账单表格填入和编辑插件

    jquery银行电子账单表格填入和编辑 前段时间做的一个银行表格账单的jquery插件,用于金额写入和编辑的应用,希望对大家有所帮助,发现问题欢迎回复 ;(function($){ function ...

  10. dotnet 新项目格式与对应框架预定义的宏

    在 sdk style 的项目格式支持使用多框架开发,此时需要在代码里面通过宏判断,在编译的时候执行不同的代码.本文告诉大家在框架里面对应的预定义的条件编译符有哪些 在让一个 csproj 项目指定多 ...