jquery 新闻循环切换

最新推荐文章于 2022-06-24 11:23:11 发布

原创最新推荐文章于 2022-06-24 11:23:11 发布 · 422 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

JS 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的新闻滚动效果，包括基于Bootstrap的响应式插件Bootstrap-News和一个简单的自制滚动插件示例。通过定时切换列表项展示最新的新闻或消息。

1. jQuery演示三种文字垂直滚动

http://www.sucaihuo.com/js/459.html

这个是Bootstrap-News，官方下载：http://www.jqueryscript.net/slider/Responsive-jQuery-News-Ticker-Plugin-with-Bootstrap-3-Bootstrap-News-Box.html

2. 不用其他框架

简单实现参考 http://blog.youkuaiyun.com/chuntian1983/article/details/7950886

HTML 部分：

<ul id="letter-scroll">
<li>第一条消息</li>
<li>第二条消息</li>
<li>第三条消息</li>
</ul>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    scrollNews("letter-scroll", 5);

});

    /**
    * 滚动切换消息
    * @param selectorId 外部容器ID
    * @param time 时间（秒），多久切换一次
     */
    function scrollNews(selectorId, time) {
        time = time * 1000;
        var selector = $("#"+selectorId);
//        selector.find("li:not(:first)").css("display","none");
        var B=selector.find("li:last");
        var C=selector.find("li:first");
        var intervalFunction = function(){
            if(B.is(":visible")){
                C.fadeIn(500).addClass("in");
                B.hide();
            }else{
                selector.find("li:visible").addClass("in");
                selector.find("li.in").next().fadeIn(500);
                selector.find("li.in").hide().removeClass("in")
            }
        };
        var intervalId = setInterval(intervalFunction, time);
        $("#letter-scroll").bind("mouseenter",function(){
            clearInterval(intervalId);
        }).bind("mouseleave",function(){
            intervalId = setInterval(intervalFunction, time);
        });
    }
    
</script>