jquery实现表格无缝滚动

最近因为工作需要，写了好几个大屏展示的页面了。。因为这种只是一个单的页面，所以，还是选择用jq来写。。

然后发现滚动表格使用率真的高。自己也没怎么写过这种，趁着周末，做做练习。

css部分我是用的弹性布局

*{
            margin:0;
            padding:0;
        }
        ul,li{
            list-style:none;
        }
        .tableBox{
            width:500px;
            height:520px;
            background:#e8e8e8;
            margin:0 auto;
            overflow:hidden;
        }
        .slide-title{
            height:2.5rem;
            line-height:2.5rem;
            display:flex;
            background:#223e80;
            color:#fff;
            text-align:center;
        }
        .slide-title span{
            flex:1;
        }
        .slide-list li{
            line-height:1.875rem;
            height:1.875rem;
            display:flex;
        }
        .slide-list li span{
            flex:1;
            text-align:center;
        }
        .slide-list li.odd{
            background:rgba(0,0,0,.3)
        }

结构部分

<div class="tableBox">
    <div class="slide-title">
        <span>title1</span>
        <span>title2</span>
        <span>title3</span>
    </div>
    <div class="slide-container">
        <ul class="slide-list js-slide-list">
            <li class="odd"><span>item1</span><span>item1</span><span>item1</span></li>
            <li class="even"><span>item2</span><span>item2</span><span>item2</span></li>
            <li class="odd"><span>item3</span><span>item3</span><span>item3</span></li>
            <li class="even"><span>item4</span><span>item2</span><span>item2</span></li>
            <li class="odd"><span>item5</span><span>item3</span><span>item3</span></li>
            <li class="even"><span>item6</span><span>item2</span><span>item2</span></li>
            <li class="odd"><span>item7</span><span>item3</span><span>item3</span></li>
            <li class="even"><span>item8</span><span>item2</span><span>item2</span></li>
            <li class="odd"><span>item9</span><span>item3</span><span>item3</span></li>
            <li class="even"><span>item10</span><span>item2</span><span>item2</span></li>
            <li class="odd"><span>item11</span><span>item3</span><span>item3</span></li>
            <li class="even"><span>item12</span><span>item2</span><span>item2</span></li>
            <li class="odd"><span>item13</span><span>item3</span><span>item3</span></li>
            <li class="even"><span>item14</span><span>item2</span><span>item2</span></li>
            <li class="odd"><span>item15</span><span>item3</span><span>item3</span></li>
            <li class="even"><span>item16</span><span>item2</span><span>item2</span></li>
        </ul>
    </div>
</div>

最后就是关键部分，js部分

鼠标滑过时清除定时器的写法

$(function(){
    //鼠标滑过时清除定时器
    $(".slide-list").hover(function(){
        clearInterval(scrollTimer);
    },function(){
        scrollTimer=setInterval(function (){
            autoScroll(".slide-list")
        },2000);
    });


    function autoScroll(obj){
            var tableUl = $(obj);
            var first = tableUl.find('li:first');
            var height = first.height();
            first.animate({
                height:0
            },500,function(){
                first.css('height',height).appendTo(tableUl);
            })
    }
   var scrollTimer = setInterval(function(){
        autoScroll(".slide-list")
    },2000)
})

2、鼠标滑过时不清除定时器

$(function(){
    
    
    function autoScroll(obj){
            var tableUl = $(obj);
            var first = tableUl.find('li:first');
            var height = first.height();
            first.animate({
                height:0
            },500,function(){
                first.css('height',height).appendTo(tableUl);
            })
    }
   setInterval(function(){
        autoScroll(".slide-list")
    },2000)
})

实现的效果

扫描二维码关注公众号，回复： 5392084 查看本文章