<!doctype html> <html> <head> <meta charset="utf-8"> <title>文字公告滚动轮播-jq22.com</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <style> * { margin:0; padding:0; } li { list-style:none; } .news { height:35px; background:#fff; overflow:hidden; } .news .t_news { height:20px; color:#2a2a2a; margin-top:15px; overflow:hidden; position:relative; width:500px; } .news .news_li,.swap { line-height:20px; display:inline-block; position:absolute; top:0; right:0; font-size:14px; text-align:right; color:#585858 } .news .swap { top:20px; } </style> </head> <body> <div class="news"> <div class="t_news"> <ul class="news_li"> <li>1 一只傻阿贝哟</li> <li>2 一只傻阿贝哟</li> <li>3 一只傻阿贝哟</li> <li>4 一只傻阿贝哟</li> <li>5 一只傻阿贝哟</li> </ul> <ul class="swap"></ul> </div> </div> <script> $('.swap').html($('.news_li').html()); x = $('.news_li'); y = $('.swap'); h = $('.news_li li').length * 20; //20为每个li的高度 var hh = $('.news_li li').length; if (hh > 1) //setTimeout(b,3000);//滚动间隔时间 现在是3秒 b(); b(); function b() { t = parseInt(x.css('top')); //alert(t) y.css('top', '20px'); x.animate({ top: t - 20 + 'px' }, 'slow'); //20为每个li的高度 if (Math.abs(t) == h - 20) { //20为每个li的高度 y.animate({ top: '0px' }, 'slow'); z = x; x = y; y = z; } setTimeout(b, 3000); //滚动间隔时间 现在是3秒 } </script> </body> </html>