某天,在网上闲逛,碰到一个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月首发,实现基本切换效果。

IE IE 6+ Firefox Firefox 3+ Chrome Chrome 3+ Safari Safari 3+ Opera Opera 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="rs/images/001.jpg" title="" alt="图片标题1" /></a></li>
  4.      <li><a href="#"><img src="rs/images/002.jpg" title="" alt="图片标题2" /></a></li>
  5.      <li><a href="#"><img src="rs/images/003.jpg" title="" alt="图片标题3" /></a></li>
  6.      <li><a href="#"><img src="rs/images/004.jpg" title="" alt="图片标题4" /></a></li>
  7.      <li><a href="#"><img src="rs/images/005.jpg" title="" alt="图片标题5" /></a></li>
  8.   </ul>
  9. </div>

JS部分

JS代码:
  1. <script type="text/javascript">
  2.         $(document).ready(function(){
  3.             $('#flashbox').smallslider({
  4.             onImageStop:false,
  5.             switchEffect:'ease',
  6.             switchEase: 'easeOutBounce',
  7.             switchPath: 'up',
  8.             switchMode: 'hover',
  9.             textSwitch:2,
  10.             textPosition: 'top',
  11.             textAlign:'center'
  12.             });
  13.         });
  14. </script>

怎么样?够简单吧?完全不需要写额外的HTML代码。
调用方法:
1。保证你的页面链接进3个文件:
  <script type="text/javascript" src="rs/js/jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="rs/js/jquery.smallslider.js"></script>
  <link rel="stylesheet" type="text/css" href="rs/css/smallslider.css" media="screen" />
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,初始化轮播图:
<script type="text/javascript">
$(document).ready(function(){
    $(function(){
    $('#flashbox').smallslider();
    });
    });
</script>
有一点要注意,就是必须固定你的调用元素的高度和宽度。一般情况下,切换的图片高度和宽度都是固定的,如果你图片大小不一,切换的时候会很难看。
如果你有好的建议,请给我发邮件:microji#163.com (请把#换成@)

参数列表:

参数默认值说明
time3000 切换时间间隔,单位毫秒,1秒=1000毫秒
autoStarttrue是否自动开始播放
onImageStopfalse 鼠标放在图片上时,是否停止播放
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"],各种切换方式之间差别不是很大,有兴趣可以逐一测试
switchTime600 切换时间,单位毫秒,1秒=1000毫秒
buttonPosition'rightBottom'按钮位置表示,共有四个值:leftTop,leftBottom,rightTop,rightBottom
buttonOffsetX10 水平方向上的按钮偏移位置,指向中心部移动多少,这里是数值,不加px
buttonOffsetY4竖直方向上的按钮偏移位置,指向中心部移动多少,这里是数值,不加px
buttonSpace4 按钮之间的间隔 单位为像素,但不要加px
showTexttrue是否显示标题,如果不显示,则只显示按钮
showButtonstrue是否显示按钮,默认显示
textLinktrue是否给显示的标题加上链接,如果为false,只显示标题,标题不可单击
textSwitch0 标题是否运动显示,如果为0则不动,1 标题动,2 标题和背景一起动。
textPosition'' 标题栏的位置,默认为空,即和按钮的位置一致,取值 top , bottom
textAlign'center'标题栏取 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.         onImageStop:true,
  4.         switchEffect:'ease',switchEase: 'easeOutSine',
  5.         switchPath: 'left',switchMode: 'hover',
  6.         showText:true,textSwitch:2
  7.         });
  • 图片标题1
  • 图片标题2
  • 图片标题3
  • 图片标题4
  • 图片标题5
javascript代码
  1. // 只显示文字,不显示按钮,文字切换,文字背景不动
  2.         $('#exp3').smallslider({
  3.         showButtons:false, showText : true,
  4.         switchEffect:'ease',
  5.         switchEase: 'easeOutCirc',
  6.         switchPath: 'up',
  7.         textSwitch:1,textAlign:'center'});