手势控制幻灯片播放html,FlexSlider|功能强大的响应式jQuery幻灯片插件

FlexSlider是一款功能强大的响应式jQuery幻灯片插件。该幻灯片插件可以制作为带缩略图模式，旋转木马模式等。它可以自适应屏幕大小，并可以制作多种幻灯片过渡特效。它的兼容性强，可以兼容IE7+的现代浏览器。它的特点还有：

支持多种幻灯片模式

支持iOS滑动手势

支持回调函数API

支持多种CSS3动画过渡效果

有额外的旋转木马选项

大量的配置参数

多种主题

使用方法

HTML结构

该幻灯片最基本的HTML结构如下：

• 

• 

• 

• 

初始化插件

在页面加载完毕之后，可以通过下面的方法来初始化该FlexSlider幻灯片插件。

$('.flexslider').flexslider({

animation: "slide",

start: function(slider){

$('body').removeClass('loading');

}

});

配置参数

namespace：namespace是有插件产生的元素的CSS名称的前缀。

默认值："flex-"

接收值：String

...

提示：namespace也可以是一个空白符，这会去除掉前缀。

selector：用于选择幻灯片容器和slide的选择器。这个选择器必须是以下模式：'{container} > {slide}'。

默认值：".slides > li"

接收值：selector

// FlexSlider setup using custom selector

$(".slider").flexslider({

selector: ".tabs > .tab"

});

...

...

animation：slider的动画类型。目前只支持2种动画：fade和slide。

默认值："fade"

接收值："fade" 或 "slide"

你可以考虑在移动触摸设备中使用淡入淡出模式，下面的代码使用Modernizr来检测touch事件是否可用。

$(".flexslider").flexslider({

animation: Modernizr.touch ? "slide" : "fade"

});

easing：该参数允许使用jQuery easing。默认是由jQuery提供的“swing”和“linear”，你可以通过引入jQuery Easing plugin来使用更多的动画过渡效果。注意，如果你选择一个不存在的easing效果，插件可能会崩溃。

默认值："swing"

接收值：String

注意：你需要设置useCCS: false来强制在支持translate3d的浏览器执行过渡动画。

direction：幻灯片的方向。支持"horizontal"和"vertical"2种方向。在淡入淡出效果中不能使用这个参数。

默认值："horizontal"

接收值：horizontal或vertical

注意：垂直幻灯片的图片高度必须相等。

reverse：该参数决定幻灯片是从左向右运动还是从右向左运动。

默认值："false"

接收值：Boolean

animationLoop：幻灯片是否无缝无限循环。如果设置为false，directionNav将会在结尾处添加.flex-disableclass。

默认值："true"

接收值：Boolean

smoothHeight：该参数允许在不同高度的图片之间平滑过渡。在水平淡入淡出幻灯片上无效果。

默认值："false"

接收值：Boolean

startAt：幻灯片的开始位置。0是第一张幻灯片。

默认值：0

接收值：Number

slideshow：幻灯片是否自动播放。

默认值：true

接收值：Boolean

slideshowSpeed：幻灯片的切换速度，单位毫秒。

默认值：600

接收值：Number

提示：如果你使用一个很慢的速度(>=700)，可以考虑在移动触摸设备上使用一个较快的速度，这会使动画过渡更加平滑。$(".flexslider").flexslider({

animation: "slide",

animationSpeed: Modernizr.touch ? 400 : 1000

});

initDelay：初始化延迟时间，单位毫秒。

默认值：0

接收值：Number

randomize：在幻灯片初始化时打乱图片的顺序。

默认值：false

接收值：Boolean

pauseOnAction：pauseOnAction是幻灯片自动播放模式的二级控制。它会在鼠标滑过幻灯片时暂停播放，离开时重新播放。

默认值：false

接收值：Boolean

useCSS：useCSS决定在CSS transitions可用时是否使用它们。

默认值：true

接收值：Boolean

touch：允许幻灯片使用touch-swipe事件。

默认值：true

接收值：Boolean

video：使用视频。Translate3D在视频上使用时会有一些bug，所以开启该参数会禁用CSS transitions，而改用 jQuery transitions。

默认值：false

接收值：Boolean

controlNav：用于动态创建幻灯片导航元素。在controlNav中传入thumbnails参数会动态创建缩略图导航。

默认值：true

接收值：Boolean或"thumbnails"

缩略图的结构如下：