HTML、JQ+JS实现无限滚动条列表

HTML代码

<ul id="express">
    <li><span>【特惠】</span><a href="#">掬一轮明月 表无尽惦念</a></li>
    <li><span>【公告】</span><a href="#">好奇金装成长裤新品上市</a></li>
    <li><span>【特惠】</span><a href="#">大牌闪购 · 抢！</a></li>
    <li><span>【公告】</span><a href="#">发福利 买车就抢千元油卡</a></li>
    <li><span>【公告】</span><a href="#">家电低至五折</a></li>
    <li><span>【特惠】</span><a href="#">掬一轮明月 表无尽惦念</a></li>
    <li><span>【公告】</span><a href="#">好奇金装成长裤新品上市</a></li>
    <li><span>【特惠】</span><a href="#">大牌闪购 · 抢！</a></li>
    <li><span>【公告】</span><a href="#">发福利 买车就抢千元油卡</a></li>
    <li><span>【公告】</span><a href="#">家电低至五折</a></li>
</ul>

JQ+JS

var margintop=0;
        var a=0;
        function one() {
            if (a===0){
            $("#express li:first-child").animate({"margin-top":--margintop},0);
            if ((-margintop)>$("#express li:first-child").height()){
                $("#express li:first-child").css("margin-top","0").appendTo($("#express"));
                margintop=0;
            }}
        }
        setInterval(one,50);
        $("#express li").hover(function () {
             a=1;
        },function () {
             a=0;
        })

 鼠标悬浮至li上可暂停滚动,这样就可以实现无限滚动内容了

该方法运用了animate的方法通过动画的方式来改变第一个li标签的上边距,

等到上边大于该标签的高度时便将其添加至ul的底部,然后将其上边距设置为正常数值

然后接着对另一个标签的上边距做改变 

使用hover方法设置悬浮是否停止,设置一个值为0的元素

鼠标悬浮至上时该元素值为1,移开时为0

将其作为if判断值为0时进入动画,值为1时停止动画