CSS + jQuery banner 轮播

1. 竖屏轮播

<div id="top-scroll">
    <ul>
         <li><img src="only-a-test1.jpg"></li>
         <li><img src="only-a-test2.jpg"></li>
         <li><img src="only-a-test3.jpg"></li>
         <li><img src="only-a-test4.jpg"></li>
         <li><img src="only-a-test5.jpg"></li>
         <li><img src="only-a-test6.jpg"></li>
    </ul>
</div>
<script type="text/javascript">
$(function(){
    $('#top-scroll').TopToDownScroll({time: 2000,num: 1});
});
(function($){
    $.fn.TopToDownScroll = function(options){
        var d = {time: 2000,s: 'fontColor',num: 1}
        var o = $.extend(d,options);
        this.children('ul').addClass('winner-line');
        var _con = $('.winner-line').eq(0);
        var _conH = _con.height();
        var _conChildH = _con.children().eq(0).height();
        var _temp = _conChildH;
        var _time = d.time;
        var _s = d.s;
        _con.clone().insertAfter(_con);
        var num = d.num;
        var _p = this.find('li');
        var allNum = _p.length;
        _p.eq(num).addClass(_s);
        var timeID = setInterval(Up,_time);
        // this.hover(function(){clearInterval(timeID)},function(){timeID = setInterval(Up,_time);});
        function Up(){
            _con.animate({marginTop: '-'+_conChildH});
            _p.removeClass(_s);
            num += 1;
            _p.eq(num).addClass(_s);
            if(_conH == _conChildH){
                _con.animate({marginTop: '-'+_conChildH},"normal",over);
            } else {
                _conChildH += _temp;
            }
        }
        function over(){
            _con.attr("style",'margin-top:0');
            _conChildH = _temp;
            num = 1;
            _p.removeClass(_s);
            _p.eq(num).addClass(_s);
        }
    }
})(jQuery);
</script>