你的位置:首页 > Java教程

[Java教程]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" >
  <ol>
    <li><a href="#">熊猫酒仙:火焰呼吸,醉酒云雾,醉拳,火土风暴↑↑↑</a></li>
    <li><a href="#">牛头酋长:冲击波,战争践踏,耐久光环,重生↓↓↓</a></li>
    <li><a href="#">暗影猎手:治疗波,妖术,毒蛇守卫,终极巫毒术↑↑↑</a></li>
    <li><a href="#">末日使者:吞噬,焦土,死亡,末日↓↓↓</a></li>
  </ol>
</div>