页面载入中..

回到页首回到页尾

一个jQuery+CSS幻灯片播放器

interjc [ code,Development ]

2009.10.08

写了一个幻灯片播放器,是用纯jQuery+CSS写的,如果你不喜欢Flash幻灯片播放器可以试试这个。其主要特点是高度宽度可以自由重新设定,幻灯片的数量也可以自由增减(当然也不能过于离谱..),使用jquery+css节省了代码,使载入更迅速..等等..

效果是这样的,请点击这里

安装方法很简单,首先在合适的地方(你想要插入幻灯片的地方)插入以下代码:

<div id="box" class="t1">
    <div id="nav">
        <p class="nav_title">
            <!--以下的a标签是你可以修改的地方(你可以按照对应的格式修改href值及内容、增减a标签数量等)-->
            <a class="t1 nav_title_checked" href="#">Test One</a> 
            <a class="t2" href="#">Test Two</a> 
            <a class="t3" href="#">Test Three</a> 
            <a class="t4" href="#">Test Four</a> 
            <a class="t5" href="#">Test Five</a> 
            <!--可修改区域结束-->
        </p>
        <p class="nav_button"> 
            <a class="nav_button_checked" title="t1" href="#">1</a> 
            <a title="t2" href="#">2</a> 
            <a title="t3" href="#">3</a> 
            <a title="t4" href="#">4</a>
            <a title="t5" href="#">5</a>
        <br class="clear" />
        </p>
    </div>
</div>

然后找到你的header.php(假设你使用Wordpress),在/head标签之前添加如下代码:


<style type="text/css">
#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;
}
</style>
 
<!--[if IE]>
<style type="text/css">
p.nav_button a{ display:block; float:left; margin:0 2px;}
</style>
<![endif]-->

修改完成后保存,刷新页面,看看是不是完成了?have fun!

欢迎在此提交BUG,或提出宝贵的意见或建议。


可以任意转载, 转载时请务必以超链接形式标明文章原始出处及此声明

本文地址:http://interjc.net/archives/2009/10/08/js-css-slider.html

3 条评论

  1. 华丽

    img回复

  2. 图片地址要不停更换?这个wordpress主题fotofolio,里好像不用自己设置图片地址的,每次幻灯显示的是最后上传的几张图。但是不知道这个主题该怎么设置,请教请教。主题地址说明在http://pupungbp.erastica.com/wordpress-theme/fotofolio-wordpress-theme-for-your-online-portfolio/

    img回复

    interjc 回复:

    @xiboo, 我这个是静态网页的做法,如果你需要图片自动更换的话,嵌入动态程序就可以了,比如PHP..

    img回复

评论

欢迎回来,! ( 更改用户 )

输入后可按 Ctrl+Enter 提交评论.