无缝滚动js

// 基于JQ的高度自适应无间缝滚动插件
// 创建一个闭包     
(function($) {     
  //插件主要内容     
  $.fn.sinaScroll = function(options) {     
    // 处理默认参数   
    var opts = $.extend({}, $.fn.sinaScroll.defaults, options);   
    return this.each(function() {  
        var $_this=$(this);
        var _autoPlay='';
        function autoPlayHandle()
        {
            clearTimeout(_autoPlay);
            var li = $_this.find(opts.children),len= li.length;
            var _t = li.eq(len-1).outerHeight();
            var $cl = li.eq(len-1).clone();
            $cl.css({opacity:0,filter:'alpha(opacity=0)'});
            $_this.prepend($cl);    
            $_this.css('top',-_t + 'px');
            if(!$_this.is(":animated"))
            {
                    $_this.animate({"top":0},1000,function()
                    {
                           $_this.find(opts.children+":last").remove();
                        $cl.animate({"opacity":1},2000,function(){
                            play();
                        });
                    });            
            }    
        }
        
        function play()
        {
            _autoPlay=setTimeout(autoPlayHandle,opts.playTime);
        }
        
        $_this.mouseover(function(){
            clearTimeout(_autoPlay);
        }).mouseleave(function(){
            play();
        });
        
        play();
        
    });
  };
    
  // 插件的defaults     
  $.fn.sinaScroll.defaults = {     
        children:'li',//操控的子元素
        playTime:2000//播放间隔时间
  };     
// 闭包结束     
})(jQuery);

使用方法

html源码

<ul id="slider">

<li>大家好</li>

<li>大家辛苦了</li>

<li>感谢大家看了</li>

</ul>

在jquery插件下面使用

$(function() { $('#slider').sinaScroll();}