simple slider v0.1 release

simple slider(以下简称 ss)是我去年底做的一个小组件, 主要用于图片的滑动展示. 除了图片以外, 也接受其它媒介(如段落文字, 列表, 表格等).

这是我的一个练习作品, 所以是用原生 JS 写的, 代码中很多很幼稚的地方, 大家用得爽就忽视, 不爽就大声吼出来吧 :-)

我理科很差, 尤其搞不懂数学(是因为人笨了么…:-(). 所以在 ss 中, 使用的是最简易的缓动算法. 小如说还可以用什么二次函数的算法来做为细腻的缓动效果, 我试了一下, 可耻的失败鸟!

最后, 因为是第一次写组件, 所以封装得也不是很到位. 所以如果大家在试用过程中遇到有什么问题, 请在这里留言或者 email 给我, 我会尽力修正. 谢谢大家.

下载地址: http://uxat.me/demo/ss/ss.js

一. DOM 结构

如果要使用 ss, 必须确保 DOM 结构如下:

<div id="gal-wrap"> // banner 外容器. id 名可以任意更改, 下同.

    <ul id="gallery"> // banner 容器. 

        <li><img src="" /></li> // banner item. 可以是图片, 段落文字或其它任何元素. 但必须嵌套在 <li> 中.
        <li><p>text here</p></li>
        <li>...</li>

    </ul>

</div>

接下来是控制面板的 DOM 结构.

<div id="gal-panel"> // panel 外容器

    <ul id="gallery-panel"> // panel 容器

        <li>1</li> // panel item. 具体可以是数字, 圆点等多种呈现.
        <li>2</li>
        <li>...</li> // 注意 panel item 数量要和 gallery item 数量相同.

    </ul>

</div>

二. 编写 CSS

CSS 没有太多需要说明的, 只是记住:

  1. gallery 容器需要设为绝对定位;
  2. 需要将 gallery item(
  3. ) 设为左浮动, 并明确指定其 width 和 height;

三. 实例化对象和初始化参数填写

在页面加载完成后(至少在 gallery 与 gallery panel 加载完后), 即可 new 出对象的实例. 然后填写好参数即可. 参数含义及默认值如下:

var slider = new simple.slider(); // 实例化
slider.init({
    gallery: '', // 此处填写 gallery 的外容器 id. 必填项.
    control: '', // 此处填写 panel 的外容器 id. 必填项.
    dir: false, // 此处填写幻灯片切换的方向. true 为垂直方向, false 为水平方向. 默认为 false. 选填项.
    index: 0, // 此处填写希望从哪张幻灯片开始. 从 0 开始, 不得大于幻灯片的总长度(即 gallery item 的 length - 1). 默认从 0 开始. 选填项.
    speed: 16, // 此处填写幻灯片的切换速度. 数值越大则切换速度越慢. 默认为 16. 选填项.
    interval: 3000, // 此处填写幻灯片的切换时长. 数值越大则切换时间越长. 单位为毫秒. 默认为 3000(3 秒钟). 选填项.
    type: 'click' // 此处填写切换幻灯片的形式. 可以接受 click(单击)和 mouseover(移动) 两种形式. 默认为 click.
})

四. 总结与后续

说实话其实去年写完后就没有再去管这个组件了. 上次因为方可在项目中要用到幻灯片切换, 才又把它拿出来用.

现在再看当时的代码, 觉得考虑得太少. 在去耦合, 颗粒化和通用性等方面都没有想周全. 代码结构和质量也很成问题.

不过不管怎样, 这也是我贡献的第一个功能组件. 接下来我会对代码结构和质量做优化. 接着会再增加一些功能, 例如不同的切换模式, 移动到幻灯片上时取消动画等. 慢慢来吧, 虽然缓慢, 但总会有进步.

最后放出一个 demo, 大家可以猛击查看: Demo

2011-05-17 20:24163