动手写插件——幻灯Demo

WordPress 之所以越来越受欢迎,很重要的一个原因是它有大量的插件。各种各样的插件使得 WordPress 的功能更为丰富,于是 Kayo 也想到自己制作一个插件,不过之前所做的插件都是代码版的,一是我对 php 不熟,毕竟做成插件的形式必定要跟 php 打交道的,二是还没有想到要做出什么样的插件。

 

刚好最近学了 jQuery 和 JavaScript ,在做完计算器后一直都想找些事作为练习,无奈一直想不到。终于在上个星期对师弟们培训的时候忍不住问了一下老博,不知道做什么,寂寞空虚冷了怎么办啊?于是老博给了一个让我眼前一亮的建议——做一个 WordPress 幻灯插件。前段时间做商站的时候,因为没有自己制作的幻灯,因此只能使用网上找的幻灯插件,结果在网上找了不下20款幻灯插件,没有一个是完全合心意的,主要是功能过于繁琐,设置起来也不方便,很多插件更是在引用 jQuery 库外另外加载了 jQuery 扩展库,虽然效果丰富,但实际应用起来也就只有“ Fade (渐显渐现)”这个效果比较适合,这样加载大量的代码实在有点浪费,于是那天经老博一提醒,我便决心做一个简洁的 WordPress 幻灯插件,既然是简洁风下的产物, Kayo 就把这个幻灯插件命名为—— Lightslide 。

 

插件的功能是用 jQuery 写的,兼容 ie6~9 以及 Firefox , chrome 等现代浏览器。因为设计这个插件时尽量以简洁为主,因此只有上(下)一张图片的按钮中使用了两张图片(总大小 2.8K ),其他包括导航、边框在内的整个框架都是直接使用 jQuery 生成 HTML 。因而不包含默认播放的图片,整个插件只有21K,插件中的默认播放的图片为 Ps 和 Kayo 拍摄所得。

 

由于这几天都比较忙,于是幻灯插件只能深夜做了,插件基本完成了,但是还要小调整,因为还要写两篇论文,所以完整的插件只能过两天才能出来了,现在先放出 HTML DEMO 。

 

http://kayosite.com/demo/lightslide/index.html

 

预览图

 

默认用户交互效果

1.幻灯图片每3秒自动循环播放
2.鼠标悬停在幻灯上幻灯停止播放
3.点击向右(向左)按钮自动播放下(上)一张图片
4.点击图片下面的导航点马上切换到相应的图片

用户可设置

1.幻灯图片的数量
2.图片的高度、宽度
3.幻灯边框的大小、颜色
4.导航是否显示,导航的颜色
5.是否显示图片的配对文字,配对文字的内容
6.是否显示上(下)一张图片按钮
7.图片的超链接
8.是否加载jQuery库

本文由 Kayo Lee 发表,本文链接:http://kayosite.com/write-plugin-by-myself-demo.html

评论列表

  • 评论者头像
    回复

    Great
    下次就用你的插件好了 :mrgreen:

  • 评论者头像
    回复

    下次想折腾幻灯片的时候就观摩你的代码啦~

  • 评论者头像
    回复

    demo的效果挺好~

  • 评论者头像
    回复

    哥们总是分享的东西都很切实际 很受用的说啊

    • 评论者头像
      回复

      @心淡若水 我做插件都是因为自己发现了某些问题,然后才做出来解决问题的,这样做的东西比较实用吧。

  • 评论者头像
    回复

    :mrgreen: :mrgreen: :mrgreen: 先留着,以后如果我的新主题出来再换上 ~

    • 评论者头像
      回复

      @Leyar 嗯嗯,很快出插件版了!不妨试试噢!

  • 评论者头像
    回复

    收藏一下,有用的上时候

  • 评论者头像
    回复

    已经开始更高级的玩博客了

  • 评论者头像
    回复

    看起来很漂亮的说,不过我折腾东西还是偏向于代码实现 :mrgreen:

    • 评论者头像
      回复

      @麦子花开 其实我也是代码控噢,这样更好折腾,做成插件版主要是想试试做插件,还有方便其他人使用!

  • 评论者头像
    回复

    都是牛人啊 :wink:

    • 评论者头像
      回复

      @无冷 无冷兄过奖了!现在坐等着你的html5大作呢!

  • 评论者头像
    回复

    很好!下来试试看效果!

  • 评论者头像
    回复

    请问ppt插件能读出正在放映的ppt那一页的数据么?怎么读取?

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail
:wink: :roll: :oops: :mrgreen: :idea: :cry: :?: :-| :-o :-P :-? :) :( 8-O