css:
*{margin: 0;padding: 0;}
body{font-size: 12px;line-height: 24px;text-algin: center; }
a{color: #fff;text-decoration: none;}
a:hover{color: #ff0000;}
.banner{width: 400px;height: 50px;overflow: hidden;position: relative;border: 1px solid #ccc;box-shadow: 2px 2px 10px #CD919E;background-image: -moz-linear-gradient(top, #f05e6f, #c9394a);background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/}
.banner ol{ position: absolute;left: 30px;list-style: none;}
.banner ol li{font-size: 12px;line-height: 24px;overflow: hidden;}
JQ:
$(function(){
var index=0;
var timer;
var ols=$('#content ol');
var liLen=ols.find('li').length;//获取所有的li数量
if (liLen>1) {
$('#content').hover(function(){
clearInterval(timer); // 停止滚动
},function(){
timer=setInterval(function(){
var lis=ols.find('li:first');
var lihei=lis.height();//获取li高度
//计算li位置，每次向上滚动一个li的高度，向下滚动-lihei改成lihei
lis.animate({marginTop:-lihei+'px'},500,function(){
//滚动完成以后置为ol末尾
lis.css('marginTop',0).appendTo(ols);
});
},3000);
}).trigger('mouseleave');
}
});
html:
<div id="content" class="banner">
<ol>
<li><a href="#">熊猫酒仙:火焰呼吸，醉酒云雾，醉拳，火土风暴↑↑↑</a></li>
<li><a href="#">牛头酋长:冲击波，战争践踏，耐久光环，重生↓↓↓</a></li>
<li><a href="#">暗影猎手:治疗波，妖术，毒蛇守卫，终极巫毒术↑↑↑</a></li>
<li><a href="#">末日使者:吞噬，焦土，死亡，末日↓↓↓</a></li>
</ol>
</div>