//无缝滚动
function AutoScroll(obj) {
var autoScrollTimer=null,timer=null;
timer=setTimeout(function(){
move();
},3000);
function move(){
clearTime(autoScrollTimer);
var liLen= $(obj).find('li').length;
if(liLen === 1){//此处处理只有一条数据时 跳动效果
$(obj).find("ul:first").append($(obj).find('li').eq(0).clone())
}
$(obj).find("ul:first").animate({
marginTop: "-25px"
}, 500, function() {
$(this).css({
marginTop: "0px"
}).find("li:first").appendTo(this);
});
autoScrollTimer=window.setTimeout(move,3000);
}
function clearTime(time){
clearTimeout(time);
time=null;
}
$(obj).find('li').hover(function(){
clearTime(autoScrollTimer);
},function(){
move()
})
}
$(function(){
//无缝滚动
$(document).ready(function() {
AutoScroll("#jvsNotice")//调用
});
})
<div class="jvsNotice" id="jvsNotice">
<ul>
<li><a href="#">公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1</a></li>
<li><a href="#">公告3公告3公告3公告3</a></li>
<li><a href="#">公告4公告4公告4公告4</a></li>
<li><a href="#">公告5公告5</a></li>
<li><a href="#">公告6公告6</a></li>
<li><a href="#">公告7公告7公告7</a></li>
<li><a href="#">公告8公告8公告8公告8</a></li>
</ul>
</div>
*{margin:0;padding:0;}
ul,ol,dl{
list-style: none;
}
.jvsNotice {
height: 25px;
line-height: 25px;
border: #ccc 1px solid;
overflow: hidden;
}
.jvsNotice>ul{
padding-left: 0;
overflow: hidden;
}
.jvsNotice li {
height: 25px;
padding-left: 10px;
text-align: center;
white-space: nowrap;
}