幻灯片/轮播

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>

FlexSlider - 响应式 jQuery 幻灯片插件

已有 471 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!