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

Posted 2021-01-16 雅士伊人

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生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>

以上是关于原生js面向对象编程-选项卡(自动轮播)的主要内容，如果未能解决你的问题，请参考以下文章

滚动轮播、默认选项卡控制器和 GridView 合二为一