<pre name="code" class="html">竖直滚动 jquery   文字 图片 
  

.box4{height:200px;overflow:hidden;}  <pre name="code" class="html">  .box4 ul{height:auto;}


<div class="box4"> <ul> <li>
</li>
<ul>
</div>


$('.box4').myScroll({
        speed:500,
        scroll_speed:500,
        see:8
    });



(function($){
    $.fn.myScroll = function(options){
        var defaults = {
            speed:40,
            see:4,
            rowHeight:35,
            scroll_speed:200
        };
        var opts = $.extend({}, defaults, options),Increase=0;
        var _self = $(this),
            speeds = opts['speed'],
            $son = $(this).find('li'),
            Reduce=scroll_li = $son.length - opts['see'],
            son_ht = $son.innerHeight(),
            scroll_spd = opts.scroll_speed;
        function marquee(obj,step){
            obj.animate({
                scrollTop: step+'px'
            },scroll_spd,function(){
                intervalFun();
            });
        }
        function intervalFun(){
            var interval = setInterval(function(){
                var _step =0;
                if(scroll_li > Increase){
                    ++Increase;
                    _step = son_ht*Increase;
                    marquee(_self,_step);
                    clearInterval(interval);
                }else if(Reduce != 0){
                    --Reduce;
                    _step = son_ht*Reduce;
                    marquee(_self,_step);
                    if(Reduce < 1){
                        Reduce = scroll_li;
                        Increase=0;
                    }
                    clearInterval(interval);
                }
            },speeds);
        }
        intervalFun();
    }
})(jQuery);