0%

一个jQuery+CSS幻灯片播放器

写了一个幻灯片播放器,是用纯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,或提出宝贵的意见或建议。