jQuery插件Simple Slider简单的图片滑动效果

一个可实现简单的图片滑动效果的jQuery插件,Simple Slider准确来说是一个左右按扭控制图片展示的工具,这对于许多重量级的jQuery图片插件来说功能就相对简单很多,不过对于应用而言,功能强大也 许末必实用,简单的库代码有利于二次开发。Simple Slider只需要指定图片包裹ID和左右按扭就能实现图片滑动功能,效果图如下:
jQuery插件Simple Slider简单的图片滑动效果
jQuery插件Simple Slider在线演示

使用说明
需要使用jQuery库文件和Simple Slider库文件
左右控制可以是图片或按扭等任意元素,带ID。
必优推荐级别:★★★

使用实例
一,包含文件部分

  1. <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
  2. <script src="jquery.simple_slider.js" type="text/javascript"></script>

二,HTML部分

  1. <img src='images/left.png' id='leftNav' />
  2. <span id='biuuu'>
  3. <img src='images/0.gif'  />
  4. <img src='images/1.gif'  />
  5. <img src='images/2.gif'  />
  6. <img src='images/3.gif'  />
  7. <img src='images/4.gif'  />
  8. <img src='images/5.gif'  />
  9. <img src='images/6.gif'  />
  10. <img src='images/7.gif'  />
  11. <img src='images/8.gif'  />
  12. <img src='images/9.gif'  />
  13. </span>
  14. <img src='images/right.png' id='rightNav' />

三,Javascript部分

  1. <script>
  2. jQuery(document).ready(function(){
  3. jQuery('#holder').show();
  4. jQuery('#biuuu').simple_slider({
  5. 'leftID': 'leftNav',
  6. 'rightID': 'rightNav',
  7. 'display': 4
  8. })
  9. });
  10. </script>

如上实例,只需要知道包裹图片元素的ID即可,如上ID为biuuu的DIV层,其它相关参数如下:
leftID表示左边控制ID
rightID表示右边控制ID
display表示显示的图片数

jQuery插件Simple Slider使用比较简单,biuuu建议可根椐实现需求进行简单的二次开发,轻松实现简单的图片滑动效果。