HTML-列表无缝滚动效果2（显示一个暂停3秒，滚走显示下一个）

 

HTML:

?

1 2 3 4 5 6 7 8 9 10 11 12

<div class="scroll-box">  <ul>   <li>1好消息！好消息！本店所有商品全部白送1</li>   <li>2好消息！好消息！本店所有商品全部白送2</li>   <li>3好消息！好消息！本店所有商品全部白送3</li>   <li>4好消息！好消息！本店所有商品全部白送4</li>   <li>5好消息！好消息！本店所有商品全部白送5</li>   <li>6好消息！好消息！本店所有商品全部白送6</li>   <li>7好消息！好消息！本店所有商品全部白送7</li>   <li>8好消息！好消息！本店所有商品全部白送8</li>  </ul> </div>

 

CSS：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

* {     margin:0;     padding:0; } .scroll-box {     width:400px;     height:40px;     border:2px solid #000;     margin:20px auto;     overflow:hidden; } .scroll-box ul {     list-style:none;     width:100%;     height:100%; } .scroll-box ul li {     width:100%;     height:40px;     box-sizing:border-box;     line-height:40px;     text-align:center; }

　　

JAVASCRIPT:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

<script type="text/javascript" src="jquery-2.1.3.min.js" ></script> <script> $(function() {     //获得当前<ul>     var $uList = $(".scroll-box ul");     var timer = null;     //触摸清空定时器     $uList.hover(function() {         clearInterval(timer);     },     function() { //离开启动定时器         timer = setInterval(function() {             scrollList($uList);         },         3000);     }).trigger("mouseleave"); //自动触发触摸事件     //滚动动画     function scrollList(obj) {         //获得当前<li>的高度         var scrollHeight = $("ul li:first").height();         //滚动出一个<li>的高度         $uList.stop().animate({             marginTop: -scrollHeight         },         600,         function() {             //动画结束后，将当前<ul>marginTop置为初始值0状态，再将第一个<li>拼接到末尾。             $uList.css({                 marginTop: 0             }).find("li:first").appendTo($uList);         });     } });