flashSlider基于Jquery的圖片展示插件.docVIP

大多数的jquery图片幻灯片插件都只是提供了“上一个”“下一个”操作，没有实现数字导航，比如 HYPERLINK /post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding \t _blank Easy Slider ，写这个插件也主要是在Easy Slider基础上改动的，由于有点像flash图片展示的效果，所以就叫flashSlider吧 先看看效果： 12345 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, //是否自定滑动