http://wange.im/jquery-slideshow-twitter.html
仿Twitter的公告效果:
方法如下:
1、HTML 部分:
<ul
id=
"twitter"
>
<li> 第一条消息 </li>
<li> 第二条消息 </li>
<li> 第三条消息 </li>
</ul>
<li> 第一条消息 </li>
<li> 第二条消息 </li>
<li> 第三条消息 </li>
</ul>
关于输出 twitter 消息的方法很多,我就总集了两篇:WordPress 非插件调用最新 Twitter、WordPress 免插件输出最新 Twitter,已经加密,密码为:wange.im,有兴趣的朋友可以看一下。
2、载入 JQuery
直接用 google 托管的就行。
<script
type=
"text/javascript"
src=
"http://ajax.googleapis.com/ajax/libs/jquery
/1.2.6/jquery.min.js" ></script>
/1.2.6/jquery.min.js" ></script>
3、JQuery 执行代码
$(
document
).
ready(
function
(){
$( "#twitter li:not(:first)" ). css( "display" , "none");
var B = $( "#twitter li:last");
var C = $( "#twitter li:first");
setInterval( function (){
if(B . is( ":visible" )){
C . fadeIn( 500 ). addClass( "in");B . hide()
} else {
$( "#twitter li:visible" ). addClass( "in");
$( "#twitter li.in" ). next (). fadeIn( 500);
$( "li.in" ). hide (). removeClass( "in" )}
}, 3000) //每3秒钟切换一条,你可以根据需要更改
})
$( "#twitter li:not(:first)" ). css( "display" , "none");
var B = $( "#twitter li:last");
var C = $( "#twitter li:first");
setInterval( function (){
if(B . is( ":visible" )){
C . fadeIn( 500 ). addClass( "in");B . hide()
} else {
$( "#twitter li:visible" ). addClass( "in");
$( "#twitter li.in" ). next (). fadeIn( 500);
$( "li.in" ). hide (). removeClass( "in" )}
}, 3000) //每3秒钟切换一条,你可以根据需要更改
})