写了一个幻灯片播放器，是用纯jQuery+CSS写的，如果你不喜欢Flash幻灯片播放器可以试试这个。其主要特点是高度宽度可以自由重新设定，幻灯片的数量也可以自由增减（当然也不能过于离谱..），使用jquery+css节省了代码，使载入更迅速..等等.. 效果是这样的，请点击这里。 安装方法很简单，首先在合适的地方（你想要插入幻灯片的地方）插入以下代码：
[Test One](#)
[Test Two](#)
[Test Three](#)
[Test Four](#)
[Test Five](#)
[1](# "t1")
[2](# "t2")
[3](# "t3")
[4](# "t4")
[5](# "t5")然后找到你的header.php（假设你使用Wordpress），在/head标签之前添加如下代码：
$(function(){
$(‘p.nav_button a’).click(function(){
var attrTitle;
$(‘p.nav_button a’).removeClass();
attrTitle = $(this).addClass(‘nav_button_checked’).attr(‘title’);
$(‘p.nav_title a’).hide();
$(‘.’+attrTitle).addClass(‘nav_title_checked’).fadeIn();
$(‘#box’).removeClass().addClass(attrTitle);
});
});
#box {
width:500px; /此处设置幻灯片的整体宽度/
height:400px; /此处设置幻灯片的整体高度/
background-color:#EEFAFF;
background-repeat:no-repeat;
position:relative;
}
/编辑以下的类更换背景图片
你可以按照规律增减图片数量，将http://d.interjc.net/slider/t1.jpg等图片地址更换为你的背景地址/
.t1{background:url(http://d.interjc.net/slider/t1.jpg);}
.t2{background:url(http://d.interjc.net/slider/t2.jpg);}
.t3{background:url(http://d.interjc.net/slider/t3.jpg);}
.t4{background:url(http://d.interjc.net/slider/t4.jpg);}
.t5{background:url(http://d.interjc.net/slider/t5.jpg);}
/编辑以上的类更换背景图片/
#nav {
height:100%;
background:#80D6FF;
position:absolute;
bottom:0;
}
#nav p.nav_button {
position:absolute;
right:8px;
bottom:8px;
}
#nav p.nav_button a {
padding:3px 5px;
background:#AB1205;
color:#FFF;
text-decoration:none;
}
#nav p.nav_button a:hover, #nav p.nav_button a.nav_button_checked {
background: #004E73;
}
#nav p.nav_title {
position:absolute;
top:5px;
left:10px;
line-height:24px;
}
#nav p.nav_title a {
display:none;
text-decoration:none;
font-weight:bold;
color: #005279;
}
#nav p.nav_title a:hover {
text-decoration:underline;
}
.clear {
line-height:0;
clear:both;
}
#nav p.nav_title a.nav_title_checked {
display:inline;
background:#80D6FF;
}
修改完成后保存，刷新页面，看看是不是完成了？have fun！ 欢迎在此提交BUG，或提出宝贵的意见或建议。