js控制轮播表格

1.css代码：

 table {

            width:auto;

            border: 1px solid none;

            border-collapse: collapse;

            color: white

        }

        th,

        td {

            height: 35px;

            border: 1px solid none;

            text-align: center;

            color: white;

            font-size: 10px;

            color: #DCDCDC;

            padding-left: 10px;

            padding-right: 10px;

        }

        table tr:nth-child(even) {

            background: #283341;

        }

        .scroll-box {

            height: 300px;

            width: auto;

            overflow: hidden;

            position: relative;

        }

        .tab-scroll {

            position: absolute;

            left: 0;

            top: 0;

            border-top: none;

        }

        .tab-scroll td {

            border-top: none;

        }

2.html代码：

 <div  style="color: #DCDCDC; font-size: 25px ">

                        <img style="width:65%;height:10%" src="Content/img/xbt.png" />

                        <div style="margin-top: -45px; margin-left: 85px; letter-spacing: 3px;">模具浇筑次数</div>

                        <table class="top tables"

                        style=" color: #DCDCDC;font-size:16px;text-align: center;">

                        <thead>

                            <tr>

                                <th style="width:70px">序号</th>

                                <th style="width:230px">模具名称</th>

                                <th style="width:100px">浇筑数量</th>

                                <th style="width:100px">错误数量</th>

                                <th style="width:80px">状态</th>

                            </tr>

                        </thead>

                    </table>

                    <div class="scroll-box" style="height: 370px;width: auto;font-style: italic;">

                        <table class="tab-scroll table">

                            <tbody id="main5">

                            </tbody>

                        </table>

                    </div>

3.js代码：

 function scrollTop() {

        var sTab = document.getElementsByClassName('tab-scroll')[0];//要滚动的表

        var tbody = sTab.getElementsByTagName('tbody')[0];//要滚动表格的内容

        console.log(tbody)

        var speed = sTab.getElementsByTagName('td')[0].offsetHeight + 3;//每次滚动的距离

        var tbdh = tbody.offsetHeight + 1;//整个表的高度,是因为上边的边不算滚动

        sTab.appendChild(tbody.cloneNode(true));//追加一次滚动内容,以防滚动后可视区域无内容

        var t = sTab.offsetTop;//获取要滚动表的位置

        if (-tbdh == t) {//比较 滚动的距离等于整个表的高度 即第一个表完全看不见

            sTab.style.transition = '0s';//过渡动画设为0秒

            sTab.style.top = 0;//位置设为初始位置

            scrollTop();//因为偷梁换柱消耗了一次过程,所以把这一次过程补回来

        } else {

            sTab.style.transition = '1s';

            sTab.style.top = t - speed + 'px';

        }

    }