flashSlider——基于Jquery的圖片展示插件

1、大多數(shù)的jquery圖片幻燈片插件都只是提供了“上一個(gè)”“下一個(gè)”操作，沒(méi)有實(shí)現(xiàn)數(shù)字導(dǎo)航，比如Easy Slider ，寫這個(gè)插件也主要是在Easy Slider基礎(chǔ)上改動(dòng)的，由于有點(diǎn)像flash圖片展示的效果，所以就叫flashSlider吧先看看效果：12345flashSlider的功能 1.支持縱向滑動(dòng)和橫向滑動(dòng) 2.支持自動(dòng)滾動(dòng)和連續(xù)滑動(dòng) 3.數(shù)字導(dǎo)航功能 4.自定義容器高度和寬度 5.可設(shè)置滑動(dòng)速度、是否自動(dòng)、停頓間隔 6.支持Jquery的easing效果（更多效果需要easing插件的支持，默認(rèn)是swing）flashSlider的使用方法 1.首先是是Html標(biāo)記 2.然后調(diào)

2、用jQuery庫(kù)和flashSlider插件 3.初始化代碼 $(document).ready(function() $(#slider).flashSlider(); ); 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(./imag

3、es/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, /縱向還是橫向滑動(dòng) speed: 800, /滑動(dòng)速度 auto: true, /是否自定滑動(dòng) pause: 2000, /兩次滑動(dòng)暫停時(shí)間 easing: swing, /easing效果，默認(rèn)swing，更多效果需要easing插件