写了一个幻灯片播放器,是用纯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
华丽
img回复
图片地址要不停更换?这个wordpress主题fotofolio,里好像不用自己设置图片地址的,每次幻灯显示的是最后上传的几张图。但是不知道这个主题该怎么设置,请教请教。主题地址说明在http://pupungbp.erastica.com/wordpress-theme/fotofolio-wordpress-theme-for-your-online-portfolio/
img回复
interjc 回复:
十一月 25th, 2009 - 18:15
@xiboo, 我这个是静态网页的做法,如果你需要图片自动更换的话,嵌入动态程序就可以了,比如PHP..
img回复