项目中有社区公告展示，要求是《=4条时直接显示，超过4条后需要循环滚动来显示，因为显示区域有限，只能一次显示4条。废话不多说，先上效果图。

为了解决这个问题，又重新翻看jquery,以前看过的差不多都忘光了，光用别人的写好的插件了，还没有真正的自己去实现 过。

没有去深入研究别人的实现原理，全凭自己想法来做了。

我的想法是，循环显示么，肯定是第一条显示过就添加到最后一条后面，重复这个动作就可以实现了。下面上代码。

<script type="text/javascript">


    //滚动社区公告
    var liLength = $(".thisGG_V div ul li").length;
    //滚动li
    function scrollLi() {
        $(".thisGG_V div ul li").eq(liLength - 1).after("<li>" + $(".thisGG_V div ul li").eq(0).html() + "</li>");
        $(".thisGG_V div ul li").eq(0).fadeOut("1000"); //一秒钟消失
        setTimeout("removeli()", 1000); //一秒后移除
    }

    var interval; //定时器
    //滚动公告
    function scrollGG() {

        if (liLength > 4) {//如果公告条数超过4条，就2秒钟开始滚动 一下。
            interval = setInterval(scrollLi, "2000");
        }
    }
    //鼠标移上移出效果
    $(".thisGG_V div ul").hover(function () {//鼠标移上，停止滚动
        clearInterval(interval);
    }, function () {//鼠标移出，开始滚动
        scrollGG();
    });
    //移除第一个li
    function removeli() {
        $(".thisGG_V div ul li").eq(0).remove();
    }

    scrollGG();

</script>

页面加载完后开始执行scrollGG()方法就可以了。先是判断容器中的li是否超过4 ，如果超过，开始用定时器执行scrollLi方法，每2秒中执行一次。scrollLi方法中会将当前第一条li的html复制下来，添加到最后一条li的后面，然后让第一条Li以1秒钟的速度淡出，再延时一秒后开始执行removeli方法，此方法就是把第一条li移除。然后就是整个过程开始循环了，就达到了循环滚动效果。

还为ul添加上鼠标事件，当鼠标移上时，停止定时器，当鼠标移出时，继续执行循环。

代码中还有很多地方需要改进，虚心接受大家的拍砖。

欢迎加入.net技术交流群

jquery滚动元素,布布扣,bubuko.com

jquery滚动元素