必优博客

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

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建议可根椐实现需求进行简单的二次开发，轻松实现简单的图片滑动效果。

往期相关：
jQuery插件Magnify放大镜实现javascript图片放大功能
jQuery插件ImageFlyout弹出图片实现javascript放大图片功能
jQuery插件simplyScroll简单卷动实现水平或垂直卷动动画效果
jQuery插件Obfuscate Image实现图片遮罩隐藏效果及原理分析
jQuery插件jbgallery实现全页展示图片并自定义类似flash插放
如何使用jQuery旋转图片插件jCarousel实现多图切换展示效果
jQuery插件Simple Controls Gallery简单控制图片库