大多数的jquery图片幻灯片插件都只是提供了“上一个”“下一个”操作，没有实现数字导航，比如Easy Slider ，写这个插件也主要是在Easy Slider基础上改动的，由于有点像flash图片展示的效果，所以就叫flashSlider吧
先看看效果：
flashSlider的功能
1.支持纵向滑动和横向滑动
2.支持自动滚动和连续滑动
3.数字导航功能
4.自定义容器高度和宽度
5.可设置滑动速度、是否自动、停顿间隔
6.支持Jquery的easing效果（更多效果需要easing插件的支持，默认是swing）
flashSlider的使用方法
1.首先是是Html标记
<div id="slider">
<ul>
<li>
<img src="images/01.jpg" alt="" />
li>
<li>
<img src="images/02.jpg" alt="" />
li>
<li>
<img src="images/03.jpg" alt="" />
li>
<li>
<img src="images/04.jpg" alt="" />
li>
<li>
<img src="images/05.jpg" alt="" />
li>
ul>
div>2.然后调用jQuery库和flashSlider插件
<script src="javascript/jquery-1.3.2.min.js" type="text/javascript">
script>
<script src="javascript/jquery.flashSlider-1.0.min.js" type="text/javascript">
script>3.初始化代码
<script type="text/javascript"> $(document).ready(function() { $("#slider").flashSlider(); });
script>4.加入css样式
/*容器*/
slider ul, #slider li
{ margin: 0; padding: 0; list-style: none; }
/*数字导航样式*/
#flashnvanum
{ bottom: 10px; position: absolute; right: 20px; width: 90px; }
#flashnvanum span
{ background: transparent url(../images/flashbutton.gif) no-repeat scroll -15px 0; color: #86A2B8; cursor: pointer; float: left; font-family: Arial; font-size: 12px; height: 15px; line-height: 15px; margin: 1px; text-align: center; width: 15px; }
#flashnvanum span.on
{ background: transparent url(../images/flashbutton.gif) no-repeat scroll 0 0; color: #FFFFFF; height: 15px; line-height: 15px; width: 15px; }flashSlider的默认参数
//默认值
$.fn.flashSlider.defaults = {
controlsShow: true, //是否显示数字导航
vertical: false, //纵向还是横向滑动
speed: 800, //滑动速度
auto: true, //是否自定滑动
pause: 2000, //两次滑动暂停时间
easing: "swing", //easing效果，默认swing，更多效果需要easing插件支持
height: 0, //容器高度，不设置自动获取图片高度
width: 0//容器宽度，不设置自动获取图片宽度
}