jQuery 列表自动循环滚动鼠标悬停时停止滚动的实现代码(图文)

要求实现：
页面中一个小的区域循环滚动展示新闻（公告、活动、图片等等），并且，鼠标悬停时停止滚动并提示，离开后，继续滚动。

演示效果图：
  

1，html页面

2，css代码

3，关键部分---js文件：

$(function() { 
var $this = $("#news"); 
var scrollTimer; 
$this.hover(function() { 
clearInterval(scrollTimer); 
}, function() { 
scrollTimer = setInterval(function() { 
scrollNews($this); 
}, 2000); 
}).trigger("mouseleave"); 

function scrollNews(obj) { 
var $self = obj.find("ul"); 
var lineHeight = $self.find("li:first").height(); 
$self.animate({ 
"marginTop": -lineHeight + "px" 
}, 600, function() { 
$self.css({ 
marginTop: 0 
}).find("li:first").appendTo($self); 
}) 
} 
}) 

代码说明：
主要是对hover、setInterval、clearInterval、animate这些方法及marginTop属性（marginLeft、top、left等等）的理解和运用。
注意：如果不加.trigger("mouseleave")，在网页初始化时列表不会滚动，还有appendTo能直接移动元素。