JQuery 滚动轮播

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>

巴特西

JQuery 滚动轮播

最新文章

热门文章