jquery 新闻循环切换

 

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.csdn.net/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>