CSS + jQuery banner 轮播

竖屏轮播 <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>