jquery 无缝轮播
新闻公告无缝轮播--demo
理解：向上移动一个li的高度+margin-bottom值，同时将ul第一个的li插入到ul的最后一个位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script src="./js/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
*{padding:0;margin:0;list-style:none;font-family:MicroSoft YaHei;}
.wrap{
margin:100px auto;
width:600px;
border:1px #eee solid;
padding:5px 10px;
overflow:hidden;
height:115px;
}
.wrap ul li{
height:40px;
line-height:40px;
border-bottom:1px #eee solid;
font-size:14px;
color:#868686;
}
</style>
</head>
<body>
<div id="auto-scroll" class="wrap">
<ul>
<li>前端技术，是一门进阶容易，精通很难的技术;</li>
<li>相比于后端技术，前端在国内应该是近5年内兴起的一门新技术新职位;</li>
<li>目前,在大学里尚未设有前端的专门专业;</li>
<li>许多前端大神都是自学成才或者是从后端转前端的;</li>
<li>前端工程师是最接近用户的"程序员",其实也未必是"程序员"!,因为前端不仅需要学习技术方面的；</li>
<li>也要懂得设计、用户体验、产品、程序运行流程、浏览器兼容性、http协议...等等;</li>
<li>这就需要前端工程师不仅要有系统的技术技能，也需要有宽广的视野...</li>
<li>广泛学习，留心观察，做一个有技术，有气质的前端吧~</li>
</ul>
</div>
<script>
function moveTo(obj) {
$(obj).find("ul:first").animate({
marginTop: "-40px"
}, 2000, function (){
// console.log($(this));
$(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
});
}
var timer;
$('#auto-scroll').hover(function(){
clearInterval(timer);
}, function(){
timer = setInterval('moveTo("#auto-scroll")', 3000) ;
}).trigger('mouseleave');
</script>
</body>
</html>
