flashSlider基于Jquery的圖片展示插件

大多數(shù)的jquery圖片幻燈片插件都只是提供了“上一個”“下一個”操作，沒有實(shí)現(xiàn)數(shù)字導(dǎo)航，比如Easy Slider ，寫這個插件也主要是在Easy Slider基礎(chǔ)上改動的，由于有點(diǎn)像flash圖片展示的效果，所以就叫flashSlider吧

flashSlider的功能

   1.支持縱向滑動和橫向滑動

   2.支持自動滾動和連續(xù)滑動

   3.數(shù)字導(dǎo)航功能

   4.自定義容器高度和寬度

   5.可設(shè)置滑動速度、是否自動、停頓間隔

   6.支持Jquery的easing效果（更多效果需要easing插件的支持，默認(rèn)是swing）

flashSlider的使用方法

  1.首先是是Html標(biāo)記

    <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.然后調(diào)用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;
}
/*數(shù)字導(dǎo)航樣式*/
#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的默認(rèn)參數(shù)

    //默認(rèn)值
    $.fn.flashSlider.defaults = {
        controlsShow: true, //是否顯示數(shù)字導(dǎo)航
        vertical: false, //縱向還是橫向滑動
        speed: 800, //滑動速度
        auto: true, //是否自定滑動
        pause: 2000, //兩次滑動暫停時間
        easing: "swing", //easing效果，默認(rèn)swing，更多效果需要easing插件支持
        height: 0, //容器高度，不設(shè)置自動獲取圖片高度
        width: 0//容器寬度，不設(shè)置自動獲取圖片寬度
    }