为博客添加slideshow幻灯片效果
最近一段时间看了许多外国比较出色的博客，除了广告多、流量大、评论少之外，几乎很大一部分都在首页放上了一个幻灯片展示-slideshow。或绚丽或低调，主要目的无疑都是突出显示博客与众不同之处，吸引读者眼球。看了很多实现方法，基本都是插件类型实现的，我不喜欢用插件，感觉比较难搞，而且定义起来麻烦。下面找了介绍两种非插件的实现的方法。
1、A Simple jQuery Slideshow
之前用过这个方法，主要通过z-index层的替换和opacity透明度的改变来实现渐变的幻灯片切换，缺点是需要加载的Jquery库比较大。
2、TinySlider
这是目前在用的方法。独立的script只有1.5k大小，并且不用加载其他东西，很小巧。脚本支持自动旋转和选项自动恢复，可以适用于导航列表的方向切换（垂直或水平）。
下面拿我目前用的做个例子。
css部分
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#wrapper {width:97%;overflow:hidden;margin:5px 20px 5px 10px;background:#fff;} #slider {float:left; position:relative;margin-left:15px;-moz-border-radius:6px 6px; overflow:auto; width:590px; height:200px;} #slider ul {position:absolute; list-style:none; top:0; left:0} #slider li {float:left; width:590px; height:200px; padding-right:10px} .pagination {float:left; list-style:none; height:25px; margin:15px 0 0 32px} .pagination li {float:left; cursor:pointer; padding:2px 7px;height:25px; color:#222} .pagination li:hover { color:#000;} .pagination li.current {background:#555 } #contents {width:566px; height:170px; padding:15px 28px 15px 18px;line-height:18px;font-size:15px;} #contents p{padding:0 6px;color:#888;} #contents p a.more-read{color:#9cf;} #contents p a.more-read:hover{color:#0ce;} #contents h2 {font:22px Georgia,Verdana; margin-bottom:11px; color:#fff} |
php部分
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<div id="wrapper"> <div id="slider"> <ul> <li id="contents">Title 1</li> <li>Title 2</li> <li>Title 3</li> <li>Title 4</li> </ul> </div> <ul id="pagination" class="pagination"> <li onclick="slideshow.pos(0)">1</li> <li onclick="slideshow.pos(1)">2</li> <li onclick="slideshow.pos(2)">3</li> <li onclick="slideshow.pos(3)">4</li> </ul> </div> <script type="text/javascript"> var slideshow=new TINY.slider.slide('slideshow',{ id:'slider', //slideshow div的 ID auto:3,// 自动切换的时间 resume:true, // 被打断后自动恢复，默认为false vertical:false,// 方向，默认为false navid:'pagination',// Optional ID ，就是1，2，3，4的选项卡 activeclass:'current',// 当前的LI position:0 // 起始位置，默认为0 }); </script> |
当然，最后别忘了在header添加（假设下载的packed.js文件，位置在主题的js文件夹内）
|
1 |
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/packed.js"></script> |
有了以上几步，实现slideshow并不难，有需要就动手试试吧。
转载请注明转自：为博客添加slideshow幻灯片效果
怕影响速度，放弃幻灯片
@MK 这个……各有所好吧
图片没放在主机，这个米用~
博主的主题感觉很舒服哈，我喜欢的风格
广告多、流量大、评论少
这个评价太贴切了 
这个很不错的 学习下
国外的广告一般都整齐的放在右边，而且处理的很漂亮，认人有点的欲望
一直担心对速度有影响，就没有尝试。
这个插件怎么指定显示的文章，看评论好像是只能一次只能指定一个分类下 的文章？
@aisinvon 显示分类文章是我自己定义的，具体显示什么可以根据自己的情况去搞哇~~
看看我博客的分类幻灯片，我是从一个插件上抠下来的