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