幻灯片/轮播

FlexSlider - 响应式jQuery幻灯片插件

创客主机


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

支持多种幻灯片模式

支持iOS滑动手势

支持回调函数API

支持多种CSS3动画过渡效果

有额外的旋转木马选项

大量的配置参数

多种主题

HTML结构:

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

  1. <div class="flexslider">
  2.   <ul class="slides">
  3.     <li>
  4.     <img src="images/1.jpg" />
  5.   </li>
  6.   <li>
  7.     <img src="images/2.jpg" />
  8.   </li>
  9.   <li>
  10.     <img src="images/3.jpg" />
  11.   </li>
  12.   <li>
  13.     <img src="images/4.jpg" />
  14.   </li>
  15.   </ul>
  16. </div>

初始化插件:

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

  1. $('.flexslider').flexslider({
  2.   animation: "slide",
  3.   start: function(slider){
  4.     $('body').removeClass('loading');
  5.   }
  6. });

配置参数

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

默认值:"flex-"

接收值:String

  1. <!-- Example generated elements -->
  2.     <ul class="flex-control-nav flex-paging">
  3.       <li><a class="flex-active" href="#"></li>
  4.       ...
  5.     </ul>

提示:namespace也可以是一个空白符,这会去除掉前缀。
selector:用于选择幻灯片容器和slide的选择器。这个选择器必须是以下模式:'{container} > {slide}'。

默认值:".slides > li"

接收值:selector

  1. // FlexSlider setup using custom selector
  2.     $(".slider").flexslider({
  3.       selector: ".tabs > .tab"
  4.     }); 
  5.     <div class="slider">
  6.       <div class="tabs">
  7.         <div class="tab"> ... </div>
  8.         <div class="tab"> ... </div>
  9.       <div>
  10.     </div>

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

默认值:"fade"

接收值:"fade" 或 "slide"

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

  1. $(".flexslider").flexslider({
  2.       animation: Modernizr.touch ? "slide" : "fade"
  3.     });

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),可以考虑在移动触摸设备上使用一个较快的速度,这会使动画过渡更加平滑。

  1. $(".flexslider").flexslider({
  2.       animation: "slide",
  3.       animationSpeed: Modernizr.touch ? 400 : 1000
  4.     });

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"
缩略图的结构如下:

  1.     <!-- Example markup for using the thumbnails pattern -->
  2.     <div class="flexslider">
  3.       <ul class="slides">
  4.         <li data-thumb="image/path.jpg">
  5.           <!-- slide content -->
  6.         </li>
  7.         <li data-thumb="image/path.jpg">
  8.           <!-- slide content -->
  9.         </li>
  10.         <li data-thumb="image/path.jpg">
  11.           <!-- slide content -->
  12.         </li>
  13.       </ul>
  14.     </div>
(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!