软件简介

大多数的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>  
                <img src="images/02.jpg" alt="" />
   >  
            <li>  
                <img src="images/03.jpg" alt="" />
   >  
            <li>  
                <img src="images/04.jpg" alt="" />
   >  
            <li>  
                <img src="images/05.jpg" alt="" /><
   /li>





    >



    div>

2.然后调用jQuery库和flashSlider插件

    <script src="javascript/jquery-1.3.2.min.js" type="text/javascript">
    >  
    <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//容器宽度，不设置自动获取图片宽度  
    }