您好,欢迎访问三七文档
当前位置:首页 > 建筑/环境 > 施工组织 > flashSlider基于Jquery的图片展示插件
大多数的jquery图片幻灯片插件都只是提供了“上一个”“下一个”操作,没有实现数字导航,比如EasySlider,写这个插件也主要是在EasySlider基础上改动的,由于有点像flash图片展示的效果,所以就叫flashSlider吧先看看效果:12345flashSlider的功能1.支持纵向滑动和横向滑动2.支持自动滚动和连续滑动3.数字导航功能4.自定义容器高度和宽度5.可设置滑动速度、是否自动、停顿间隔6.支持Jquery的easing效果(更多效果需要easing插件的支持,默认是swing)flashSlider的使用方法1.首先是是Html标记divid=sliderulliimgsrc=images/01.jpgalt=//liliimgsrc=images/02.jpgalt=//liliimgsrc=images/03.jpgalt=//liliimgsrc=images/04.jpgalt=//liliimgsrc=images/05.jpgalt=//li/ul/div2.然后调用jQuery库和flashSlider插件scriptsrc=javascript/jquery-1.3.2.min.jstype=text/javascript/scriptscriptsrc=javascript/jquery.flashSlider-1.0.min.jstype=text/javascript/script3.初始化代码scripttype=text/javascript$(document).ready(function(){$(#slider).flashSlider();});/script4.加入css样式/*容器*/sliderul,#sliderli{margin:0;padding:0;list-style:none;}/*数字导航样式*/#flashnvanum{bottom:10px;position:absolute;right:20px;width:90px;}#flashnvanumspan{background:transparenturl(../images/flashbutton.gif)no-repeatscroll-15px0;color:#86A2B8;cursor:pointer;float:left;font-family:Arial;font-size:12px;height:15px;line-height:15px;margin:1px;text-align:center;width:15px;}#flashnvanumspan.on{background:transparenturl(../images/flashbutton.gif)no-repeatscroll00;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//容器宽度,不设置自动获取图片宽度}源代码:
本文标题:flashSlider基于Jquery的图片展示插件
链接地址:https://www.777doc.com/doc-2873731 .html