原生js面向对象编程-选项卡(自动轮播)

<!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>

原文地址:https://www.cnblogs.com/javascripter/p/9897554.html

时间: 2024-10-22 07:33:47

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

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

<!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: non

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

最近在不断的加强巩固js.在学习jq和vue之后发现很多东西其实都是不明所以,有些底层的东西自己不懂,到头来也只是一昧的使用,一直在用别人的东西,对自己的成长帮助也不大. 万丈高楼平地起,基础打扎实了学什么都快,而且我觉得用原生的代码写完好像自己有点小成就感的.现在记录一下今天复习的原生js无缝轮播吧. 先上一张自拍镇楼,哈哈哈 首先先说一下思路吧,首先任意张图片以ul的形式保存显示,上代码吧 <div id="wrap"> <ul id="ul"

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

原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能实现都分别分为不同的模块.目前我封装的这个版本还不适配移动端,只适配PC端. 主要的功能有:自动轮播,点击某一张图片对应的小圆点就跳转到指定图片,有前后切换按钮.使用的时候只需要传入图片的路径以及每张图片分别所对应的跳转路径还有目标盒子ID就可以了,还可以自定义每张图轮播的延时,不过延时参数不是必须

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

<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>原生js实现tab选项卡里内嵌图片滚动特效代码</title><meta name="keywords" content="原生js实现tab选项卡里内嵌图片滚动特效代码" /><meta name=&

简单粗暴地理解js原型链--js面向对象编程

简单粗暴地理解js原型链--js面向对象编程 原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧,想点与代码无关的事,比如人.妖以及人妖. 1)人是人他妈生的,妖是妖他妈生的.人和妖都是对象实例,而人他妈和妖他妈就是原型.原型也是对象,叫原型对象. 2)人他妈和人他爸啪啪啪能生出一堆人宝宝.妖他妈和妖他爸啪啪啪能生出一堆妖宝宝,啪啪啪就是构造函数,俗

js面向对象编程:如何实现方法重载

js中如何实现方法重载?这涉及到三个问题 1同名函数的调用问题 2函数中特殊的参数arguments 3如何利用arguments实现方法重载 1同名函数的调用问题 都知道在js中如果存在多个名称相同的函数,则调用实际每次都只使用最后一个,js其实是没有重载的,也就是说,如果定义了多个同名的函数,单参数不一样,在调用时,js不管参数个数,只管前后顺序 例如: function test1(arg1) { alert("参数1:"+arg1); } function test1(arg1

js面向对象编程:如何定义常量?

js中有一个关键字const,但目前的浏览器似乎还不支持,如果一定要定义一些常量,其实可以使用闭包,匿名函数实现常量的定义. 例如: var Class = (function() { var UPPER_BOUND = 100;//定义了常量 var Test={}; // 定义了一个静态方法 获取常量的方法 Test.getUPPER_BOUND=function() { return UPPER_BOUND; } return Test; })(); 用法: var k=Class.get

js面向对象编程:两个小括号的使用

在查看很多jQuery的过程中,经常遇到两个小括号的情况. 例如: (function() { alert("测试1"); })(); (function() { alert("测试3"); }()); 其实这段代码,就是定义了一个匿名函数,并且进行了调用, 相当于如下几行代码: (function ListCommon2() { alert("测试1"); })(); (function ListCommon3() { alert("

js面向对象编程:this到底代表什么?

在js中this的用法很让人迷惑,有些像Java或者C#中的this,但又不完全一样.按照流行的说法this总是指向调用方法的对象. 1.纯粹函数调用. function ListCommon2(x) { this.x=x; alert("this 是 ListCommon2"+(this instanceof ListCommon2)); alert("this.constructor"+this.constructor); } function test(){