一.原理
实现的中心思想，如图所示：图片移动，用的是appendTo()这个方法。这个方法是先将标签从父标签中删除，然后拼接到某个标签后面，所以也就是替我们实现了，remove()这个方法。所以用这个方法是极好的~然后就会用到定时器了。用定时器每次调用移动方法，让每次执行一个动画，改变它的margin-top值，执行完动画后，再将它的margin-top变为初始值；触摸标签清除定时器，离开后，继续执行。
代码实现
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>滚动信息</title><style>*{margin: 0;padding:0;}.scroll-box{width: 400px;height: 200px;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;}</style><script src="/libs/jquery/2.1.4/jquery.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);},1000);}).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);});}});</script></head><body><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></body></html>
.6.15 补充另一种方法
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style type="text/css">#box{width:260px;height:100px;margin:0 auto;border:2px solid red;overflow: hidden}ul{padding:0;margin:0;list-style: none;overflow: hidden}ul li{height:24px;line-height: 24px;padding-left:10px;}</style></head><body><div id="box"><ul id="con1" onMouseOut="Up()" onMouseOver="Stop()"><li>第一段话 </li><li>第二段话 </li><li>第三段话 </li><li>第四段话 </li><li>第五段话 </li><li>第六段话 </li></ul><ul id="con2"></ul></div></body><script type="text/javascript">var box=document.getElementById("box");var con1=document.getElementById("con1");var con2=document.getElementById("con2");var s=document.getElementsByTagName("a");var speed=50;//con1的内容可以进行自定义//con2的内容与con1的内容一致con2.innerHTML=con1.innerHTML;function ScrollUp(){if( box.scrollTop>=con1.scrollHeight){box.scrollTop=0;}elsebox.scrollTop++;}var i=setInterval("ScrollUp()",speed);function Stop(){clearInterval(i);}function Up(){i=setInterval("ScrollUp()",speed);}</script></html>
