为博客添加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. QQ免费网提供QQ空间资源下载。

    2010年07月21日
  2. 还不错 代码也不是很多 :wink:

    2010年07月21日
  3. 弄成插件最好不过了呀! :?:

    2010年07月21日
    • @疯子 这个弄成插件估计也不大,自己折腾吧,乐趣多多呢

      2010年07月21日
  4. 哦也,效果狠好呢,修,问下你帖代码那个貌似用插件实现的么? :mrgreen:

    2010年07月21日
  5. 很好,值得动手一试。

    2010年07月21日
  6. :eek: 好东西。。迟早有一天,魔法幻术会用科学的形式来实现滴。。

    2010年07月21日
    • @虾 这个就有点飘渺了

      2010年07月21日
  7. 原来这个叫slideshow啊,我的主题也有,不过我注释掉了 :lol:

    2010年07月21日
  8. Fucos 窗口 我一直想自己定义展示 但是也一直做不来 – –

    2010年07月21日
    • @7cbt 多折腾点就熟悉了~~

      2010年07月22日
  9. 前几天朋友给我了一个soChange,国人开发的jQuery插件,还不错。

    2010年07月22日
  10. 貌似很多主题都自带了,这个显示效果还是蛮好的

    2010年07月22日
    • @草儿 是啊,自己定义一下感觉还不错。

      2010年07月22日
  11. 这个可以有~
    加上去之后感觉博客内容丰富了 :idea:

    2010年07月22日
  12. 看着很漂亮。。。
    阿修,把你代码框左上角那个水印弄淡一点吧,感觉有点覆盖代码了。

    2010年07月22日
    • @zchiy2k 谢谢,我改了一下~~

      2010年07月23日
    • @阿修 我觉得还是以前那个帅,把以前那个PHP几个字透明度降低应该了可以吧?呵呵

      2010年07月23日
    • @zchiy2k 对了,这也是个办法~我试试。其实我也挺喜欢php那个,哈哈

      2010年07月23日
    • @阿修 现在看着舒服多了,可以再降低点透明度,呵呵

      2010年07月23日
    • @zchiy2k 好的,我再调整调整。谢谢提醒啦

      2010年07月23日
  13. 广告多、流量大、评论少 :!:

    2010年07月23日
  14. 广告多、流量大、评论少,怎么看出来的?

    2010年07月23日
  15. 但是觉得用插件的话,插件更新会比较及时和方便,如果用代码的话,可能以后更新起来会比较麻烦?

    2010年07月23日
    • @Lazyyyyyy 说反啦。用插件的话更新完就恢复出厂设置了,还需要重新来过。自己写代码的话只要不换主题就不用更新~~

      2010年07月24日

发表评论

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

*

:razz: