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

时间：2021-09-19 23:55:03
<!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>

相关文章