上下轮流滚动公告代码

公告代码
   

    <div class="focus-ctr"> <span class=""></span> <span class=""></span> <span class=""></span> </div>  <div class="mod mod-js"><style type="text/css"> 
    
header, nav, aside, menu, figure, article, footer { display:block; } 
    
body, div, form, textarea, label, input, ul, ol, li, dl, dt, dd, p, span, a, img, h1, h2, h3, h4, h5, h6, tbody, tfoot, tr, th, td, pre, code, form, fieldset, legend, font { margin:0; padding:0; } 
    
table { border-collapse:collapse; border-spacing:0; } 
    
caption, th { text-align:left; } 
    
sup { vertical-align:text-top; } 
    
sub { vertical-align:text-bottom; } 
    
li { list-style:none; } 
    
fieldset, img { border:none; } 
    
input, textarea, select { font-family:inherit; font-size:inherit; font-weight:inherit; *font-size:100%; 
    
color:inherit; _color:#333; *color:#333; 
    
outline:none; } 
    
/*BASE CLASS*/ 
    
.cfix { *display:inline-block;*zoom:1} 
    
.cfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } 
    
/*公告栏滚动CSS*/ 
    
#callboard { 100%; margin:0px auto 0; height:24px; line-height:24px; overflow:hidden; font-size:16px; background-color:#f0f0f0;} 
    
#callboard ul { padding:0; } 
    
#callboard li { padding:0; } 
    
</style> 
    
<script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.7.2.min.js"></script> 
    
 
    
<div id="callboard"> 
    
<ul> 
    
 
    
 
    
 
    
<li style="margin-top: 0px;"> 
    
<a href="http://zygxsq.kuaizhan.com">公告[1]：欢迎关注资源共享社区</a> 
    
</li>
    
<li style="margin-top: 0px;"> 
    
<span style="color:red;">公告[2]：微信公众号zygxsq</span> 
    
</li>
    
<li style="margin-top: 0px;"> 
    
<span style="color:red;">公告[3]：小小鱼儿小小林</span> 
    
</li>
    
</ul> 
    
</div> 
    
<!--公告板滚动--> 
    
<script type="text/javascript"> 
    
(function (win){ 
    
var callboarTimer; 
    
var callboard = $('#callboard'); 
    
var callboardUl = callboard.find('ul'); 
    
var callboardLi = callboard.find('li'); 
    
var liLen = callboard.find('li').length; 
    
var initHeight = callboardLi.first().outerHeight(true); 
    
win.autoAnimation = function (){ 
    
if (liLen <= 1) return; 
    
var self = arguments.callee; 
    
var callboardLiFirst = callboard.find('li').first(); 
    
callboardLiFirst.animate({ 
    
marginTop:-initHeight 
    
}, 500, function (){ 
    
clearTimeout(callboarTimer); 
    
callboardLiFirst.appendTo(callboardUl).css({marginTop:0}); 
    
callboarTimer = setTimeout(self, 1000); 
    
}); 
    
} 
    
callboard.mouseenter( 
    
function (){ 
    
clearTimeout(callboarTimer); 
    
}).mouseleave(function (){ 
    
callboarTimer = setTimeout(win.autoAnimation, 1000); 
    
}); 
    
}(window)); 
    
setTimeout(window.autoAnimation, 1000); 
    

    
</script></div>