某天，在网上闲逛，碰到一个Slider的jQuery插件，受其启发，改写成了这个插件SmallSlider插件，几经修改，最后成了现在这个。 2009年7月3日，发布第一版，0.4版本发布，基本上符合标准jQuery插件开发，由于小弟能力有限，暂时实现了基本的切换效果， 特效方面稍显不足，源码公布网上，期待有高人继续能改进，多加进切换特效。

更新

2010-03-150.4版本代码全部翻新，更加符合jQuery插件标准写法，修复部分切换过度问题；

2010-03-110.3版本升级分离了标题显示，标题可以选择独立出来切换，使其更加接近Flash切换；

2010-02-020.2版本升级添加滑动切换效果，修复切换过度不自然问题；

2009-07-030.1版本2009-07-3首发，实现基本切换效果；

IEIE 6+FirefoxFirefox 3+ChromeChrome 3+SafariSafari 3+OperaOpera 9.5+

特点

  1. 调用简单：只需标准的HTML代码加一句JS代码，无须任何附加代码
  2. 个性定制：按钮和标题显示的位置可以随意定制
  3. 特效切换：透明变幻或滑动切换，切换更加自然
  4. 安全代码：经过数小时Leak Monitor内存泄漏测试，绝对没有内存泄漏问题
  5. 多个轮播：经封装的轮播写法，支持页面上同时有多个轮播图

先看看效果：

  • 图片标题1
  • 图片标题2
  • 图片标题3
  • 图片标题4
  • 图片标题5

要做到上面的效果，只需要标准的html代码，加上一句js调用即可，按钮和标题完全由js生成，不需额外写任何代码。

示例代码：

HTML部分

HTML代码：
  1. <div id="flashbox" class="smallslider">
  2.   <ul>
  3.     <li><a href="#"><img src="images/001.jpg" width="320" height="200" alt="图片标题1" /></a></li>
  4.     <li><a href="#"><img src="images/002.jpg" width="320" height="200" alt="图片标题2" /></a></li>
  5.     <li><a href="#"><img src="images/003.jpg" width="320" height="200" alt="图片标题3" /></a></li>
  6.     <li><a href="#"><img src="images/004.jpg" width="320" height="200" alt="图片标题4" /></a></li>
  7.     <li><a href="#"><img src="images/005.jpg" width="320" height="200" alt="图片标题5" /></a></li>
  8.   </ul>
  9. </div>

JS部分

JS代码：
  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3.     $('#flashbox').smallslider({
  4.         switchEffect: 'ease',
  5.         switchEase: 'easeOutBounce',
  6.         switchPath: 'up',
  7.         textPosition: 'top',
  8.         textAlign: 'center',
  9.         textSwitch: 2
  10.     });
  11. });
  12. </script>
怎么样？够简单吧？完全不需要写额外的HTML代码；
调用方法：
1、保证你的页面链接进3个文件：
HTML代码：
  1. <link href="css/smallslider.css" rel="stylesheet" type="text/css" />
  2. <script type="text/javascript" src="js/jquery-1.3.2.min.js" /></script>
  3. <script type="text/javascript" src="js/jquery.smallslider.js" /></script>
2、HTML 结构如下：
  1)，最外层必须为一个div元素，这个div需要指定一个class为：smallslider
  2)，div内的HTML结构为一个ul标签，ul内为li标签，li内为a标签，a内为img标签，即：div--->ul--->li--->a--->img
  3)，img标签的alt属性为显示的标题文字内容，所以必须要有
3、JS 初始化图片轮播：
JS代码：
  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3.     $('#flashbox').smallslider();
  4. });
  5. </script>
有一点要注意，就是必须固定你的调用元素的高度和宽度。一般情况下，切换的图片高度和宽度都是固定的，如果你图片大小不一，切换的时候会很难看。

参数列表：

参数 默认值 说明
time 3000 切换时间间隔，单位毫秒，1秒=1000毫秒
autoStart true 是否自动开始播放
onImageStop false 鼠标放在图片上时，是否停止播放
switchMode 'hover' 图片切换的方式，click为单击切换，hover为鼠标移动到按钮上时切换
switchEffect 'fadeOut' 切换特效，可选值为：fadeOut，ease，none
switchPath 'left' 切换的方向，可选值为：up ， left ，即向上，向左
switchEase 'easeOutQuart' 当switchEffect为'ease'时可用；可选值列表如下：["easeInQuad", "easeOutQuad", "easeInOutQuad", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeInQuint", "easeOutQuint", "easeInOutQuint", "easeInSine", "easeOutSine", "easeInOutSine", "easeInExpo", "easeOutExpo", "easeInOutExpo", "easeInCirc", "easeOutCirc", "easeInOutCirc", "easeInElastic", "easeOutElastic", "easeInOutElastic", "easeInBack", "easeOutBack", "easeInOutBack", "easeInBounce", "easeOutBounce", "easeInOutBounce"]，各种切换方式之间差别不是很大，有兴趣可以逐一测试
switchTime 600 切换时间，单位毫秒，1秒=1000毫秒
buttonPosition 'rightBottom' 按钮位置表示，共有四个值：leftTop，leftBottom，rightTop，rightBottom
buttonOffsetX 10 水平方向上的按钮偏移位置，指向中心部移动多少，这里是数值，不加px
buttonOffsetY 4 竖直方向上的按钮偏移位置，指向中心部移动多少，这里是数值，不加px
buttonSpace 4 按钮之间的间隔 单位为像素，但不要加px
showText true 是否显示标题，如果不显示，则只显示按钮
showButtons true 是否显示按钮，默认显示
textLink true 是否给显示的标题加上链接，如果为false，只显示标题，标题不可单击
textSwitch 0 标题是否运动显示，如果为0则不动，1 标题动，2 标题和背景一起动
textPosition 'bottom' 标题栏的位置，默认为空，即和按钮的位置一致，取值 top , bottom
textAlign 'left' 标题栏取 top 或 bottom 时，有效，left, center, right

一组实例：

  • 图片标题1
  • 图片标题2
  • 图片标题3
  • 图片标题4
  • 图片标题5
javascript代码
  1. //完全默认参数：
  2.     $('#exp1').smallslider();
  • 图片标题1
  • 图片标题2
  • 图片标题3
  • 图片标题4
  • 图片标题5
javascript代码
  1. // 只显示按钮，不显示文字，单击按钮切换
  2.     $('#exp2').smallslider({
  3.         switchEffect: 'ease',
  4.         switchMode: 'click',
  5.         showText: false
  6.     });
  • 图片标题1
  • 图片标题2
  • 图片标题3
  • 图片标题4
  • 图片标题5
javascript代码
  1. // 只显示文字，不显示按钮，文字切换，文字背景不动
  2.     $('#exp3').smallslider({
  3.         switchEffect: 'ease',
  4.         switchPath: 'up',
  5.         textAlign: 'center',
  6.         textSwitch: 1,
  7.         showButtons: false
  8.     });