为博客添加slideshow幻灯片效果

By
WP札记

最近一段时间看了许多外国比较出色的博客,除了广告多、流量大、评论少之外,几乎很大一部分都在首页放上了一个幻灯片展示-slideshow。或绚丽或低调,主要目的无疑都是突出显示博客与众不同之处,吸引读者眼球。看了很多实现方法,基本都是插件类型实现的,我不喜欢用插件,感觉比较难搞,而且定义起来麻烦。下面找了介绍两种非插件的实现的方法。

1、A Simple jQuery Slideshow

JquerySlideshow.jpg

演示:demo 下载:Download

之前用过这个方法,主要通过z-index层的替换和opacity透明度的改变来实现渐变的幻灯片切换,缺点是需要加载的Jquery库比较大。

2、TinySlider

tinyslider.jpg

演示:demo. 下载:Download

这是目前在用的方法。独立的script只有1.5k大小,并且不用加载其他东西,很小巧。脚本支持自动旋转和选项自动恢复,可以适用于导航列表的方向切换(垂直或水平)。

下面拿我目前用的做个例子。

css部分

php部分

当然,最后别忘了在header添加(假设下载的packed.js文件,位置在主题的js文件夹内)

有了以上几步,实现slideshow并不难,有需要就动手试试吧。

0

Comments: 86

  1. 这个幻灯片是个好东西,我用过flash的和CFG

    2010年07月20日
  2. 这个可以拿来做侧边栏的广告位 哈哈! :shock:

    2010年07月20日
    • @苏扬 这个想法不错哈~~增加主题动感

      2010年07月20日
  3. 我要的就是这个啊 :roll: :oops:

    2010年07月20日
    • @Mucid 话不多说,折勒个腾啊~~

      2010年07月20日
    • @阿修 我玩一哈哈学一哈哈,搞得好慢啊。。

      2010年07月22日
    • @Mucid 空间在抽风,这几天不太稳定~~

      2010年07月22日
    • @阿修 我的VPS那天停鸡检修了下把偶吓死鸟,不过我的很少抽啊 :wink:

      2010年07月22日
    • @Mucid 可能这几天有关部门又想查查了

      2010年07月22日
  4. TinySlider这个我用过,很小巧,很不错

    2010年07月20日
    • @万戈 看来万哥很多东西都试过水了,惭愧啊惭愧…… :arrow:

      2010年07月20日
  5. 这个帅,我也想加,但不知道加到哪里 :arrow:

    2010年07月20日
    • @zwwooooo 放到上面当付费主题广告栏用~ :lol:

      2010年07月20日
  6. 首页文章右侧缩略图是怎么弄的,插件吗?

    2010年07月20日
    • @winy 直接截取的文章第一张图片出来做的缩略图。

      2010年07月20日
    • @阿修 若是图片不在本地的话好像不行吧

      2010年07月20日
    • @winy 什么意思?我的图床用的flickr啊……

      2010年07月20日
    • @阿修 我的意思是外联图片不能压缩。。缩放会很难看,回去试试

      2010年07月20日
    • @winy 图片确实有点变形,不过在新方法前,先这么放着吧,我觉得比没图片好看点~哈哈

      2010年07月20日
  7. 主题变得好快好快~~ :razz:

    2010年07月20日
    • @隐残影 速度应该慢了吧…或者你是说主题更新速度? :wink: :wink:

      2010年07月20日
    • @阿修 Righr~~几乎每次来都不一样~~~ :!:

      2010年07月20日
    • @隐残影 哈哈,生命不息,折腾不止……

      2010年07月20日
  8. 另外,首页这个幻灯片是自己手动添加的?没用主循环啊

    2010年07月20日
    • @winy 我用了循环输出的特定分类下的文章,不过写出来看着怕误解,直接用title代替了。

      2010年07月20日
    • @阿修 我去研究下把缩略图也放进去

      2010年07月20日
    • @winy 好,期待你的新效果

      2010年07月20日
  9. 效果蛮不错的说,blog的代码样式也很赞哦 :mrgreen:

    2010年07月20日
    • @奶牛 代码样式?呵呵,就那样吧

      2010年07月21日
  10. 支持一下~~~我现在的博客的相册都删去了~~直接放在网易算了~~相片浪费空间~~~

    2010年07月21日
    • @Junan 我一直没放相册,管理起来很麻烦哪

      2010年07月21日
  11. 很漂亮,很简单。

    2010年07月21日
    • @forece 简单漂亮这不是很多人都向往的嘛

      2010年07月21日
  12. 呵呵 这个我也试过啦~

    2010年07月21日
  13. 我用的Featured Content Gallery,目前用过最适合我的,添加内容也方便,但杯具是这个插件跟很多插件都不兼容,但最最最杯具是跟jqQuery冲突,我就只能在内页用jQuery了

    2010年07月21日
    • @kaka 竟然有这么杯具的插件,你还是早日换一个吧……

      2010年07月21日
  14. 厉害!看起来效果还不错

    2010年07月21日
    • @hodz.cn 呵呵,瞎折腾。效果不错就好

      2010年07月21日
  15. 每次来都忍不住 感叹这个主题好帅气 :?:

    2010年07月21日

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

:razz: