flexslider图片轮播、多图相册滑动(支持触屏版)
压缩包内三种样式,含图文的、多图自适应尺寸滑动的。flexslider图片轮播、多图相册滑动(支持触屏版)。更详细特效教程 http://www.sucaihuo.com/js,都是优质素材,最主要是既有教程,也有演示并且可下载哦,技术大咖也来切磋下吧^_^ Flexslider最受众多开发人员好评的优秀,具有以下优势: 支持触屏移动设备滑动。 支持滑动和淡入淡出效果。 支持水平、垂直方向滑动。 支持键盘方向键控制。 支持图文并茂滑动。 自适应屏幕大小。 易控制滑动单元个数。 选项设置和回调函数很丰富。 HTML 接着加载jQuery.js和jquery.flexslider-min.js及flexslider.css。 jQuery 调用Flexslider插件超级简单,只要用以下代码即可: $(function() { $(".flexslider").flexslider(); }); Flexslider参数设置 参数 描述 默认值 animation 动画效果 fade direction 内容滑动方向:horizontal(水平) vertical(垂直) horizontal animationLoop 是否循环滚动 true startAt 初始滑动时的起始位置,定位从第几个开始滑动 0 slideshow 是否自动滑动 true slideshowSpeed 滑动内容展示时间(ms) 7000 animationSpeed 内容切换时间(ms) 600 initDelay 初始化延时时间 0 pauseOnHover 当鼠标滑动到滚动内容时,是否暂停滚动 false touch 是否支持触摸滑动(包括wap及其他移动设备) true directionNav 是否显示左右箭头按钮 true minItems 一次最少展示滑动单元个数 1 maxItems 一次最多展示滑动单元个数 0 move 一次滑动单元个数 0 回调函数 start: function(){}, before: function(){}, after: function(){}, end: function(){}, added: function(){}, removed: function(){}, init: function(){}, s"> 接着加载jQuery.js和jquery.flexslider-min.js及flexslider.css。 jQuery 调用Flexslider插件超级简单,只要用以下代码即可: $(function() { $(".flexslider").flexslider(); }); Flexslider参数设置 参数 描述 默认值 animation 动画效果 fade direction 内容滑动方向:horizontal(水平) vertical(垂直) horizontal animationLoop 是否循环滚动 true startAt 初始滑动时的起始位置,定位从第几个开始滑动 0 slideshow 是否自动滑动 true slideshowSpeed 滑动内容展示时间(ms) 7000 animationSpeed 内容切换时间(ms) 600 initDelay 初始化延时时间 0 pauseOnHover 当鼠标滑动到滚动内容时,是否暂停滚动 false touch 是否支持触摸滑动(包括wap及其他移动设备) true directionNav 是否显示左右箭头按钮 true minItems 一次最少展示滑动单元个数 1 maxItems 一次最多展示滑动单元个数 0 move 一次滑动单元个数 0 回调函数 start: function(){}, before: function(){}, after: function(){}, end: function(){}, added: function(){}, removed: function(){}, init: function(){},
用户评论
还不错,学习了