HTML-列表無縫滾動效果2（顯示一個暫停3秒，滾走顯示下一個）

 

HTML:

<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：

* {
	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:

<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);
        });
    }
});