jQuery实现广告条滚动效果

2020-11-27 来源：年旅网

本文实例为大家分享了jQuery实现广告条滚动效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 *{padding: 0px;margin: 0px;}
 #list{width: 150px;height: 310px;margin: 0px auto;border: 1px solid #ccc;overflow: hidden;}
 #list li{list-style: none;height: 30px;line-height: 30px;border-bottom: 1px dashed #999;}
 </style>
 <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
 <script>
 var marginTop = 0;//注意命名
 var scroll = true; 
 //定时函数，每150毫秒执行一次函数
 setInterval(function(){
 if(scroll){ 
 $("#list li:first").animate( //第一个li开始执行动画
 {marginTop:marginTop--}, //设置上面的外边距自减
 0,
 function(){ //动画之后执行的函数

 if( -marginTop==$(this).height()+1){ //判断li移动的距离是否超过自身的高度
 var $f = $(this); //复制一个li
 $(this).remove(); //把第一个移除。第一个移除之后，第二个就自动变为第一个
 marginTop=0;
 $f.css("margin-top","0px");
 $("ul").append($f); //把第一个追加加到列表的最后，变成一个无缝连接
 }
 }
 );
 }
 },150);
 $(function(){
 $("ul").hover(function(){scroll = false;},function(){scroll = true;});

 });
 </script>
 </head>
 <body>
 <div id="list">
 <ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 <li>7</li>
 <li>8</li>
 <li>9</li>
 <li>10</li>
 <li>11</li>
 </ul>
 </div>
 </body>
</html>

显示全文

全部栏目

jQuery实现广告条滚动效果