jquery-flipster是一款效果非常炫酷的响应式支持触摸屏的3D旋转木马特效jQuery插件。该旋转木马特效基于CSS3 3D transform制作,效果和CoverFlow类似。该插件是响应式的,旋转木马会自动居中显示。并且它支持移动手机的触摸屏。如果浏览器不支持CSS3 3D transform,该旋转木马会自动回退显示为平面图片。

可以通过键盘的方向键,鼠标和前后导航按钮来控制该旋转木马的动画。

使用方法

使用该旋转木马插件需要引入jQuery和flipster.js、flipster.css文件。

<link rel="stylesheet" href="css/flipster.css">
<script src="jquery/1.10.2/jquery.min.js"></script>
<script src="/js/jquery.flipster.js"></script>                
              
HTML结构

该旋转木马特效使用一个<div>来包裹一个图片无序列表。

<div class="flipster">
    <ul>
        <li><img src="" alt="" /></li>
        ...
    </ul>
</div>                
              
初始化插件
$(function(){ $('.flipster').flipster(); });                
              

配置参数

$(function(){ 
    $('.flipster').flipster({
        itemContainer:      'ul', // Container for the flippin' items.
        itemSelector:       'li', // Selector for children of itemContainer to flip
        style:              'coverflow', // Switch between 'coverflow' or 'carousel' display styles
        start:              'center', // Starting item. Set to 0 to start at the first, 'center' to start in the middle or the index of the item you want to start with.

        enableKeyboard:     true, // Enable left/right arrow navigation
        enableMousewheel:   true, // Enable scrollwheel navigation (up = left, down = right)
        enableTouch:        true, // Enable swipe navigation for touch devices

        enableNav:          false, // If true, flipster will insert an unordered list of the slides
        enableNavButtons:   false, // If true, flipster will insert Previous / Next buttons

        onItemSwitch:       function(){}, // Callback function when items are switches
    }
});                
              
  • itemContainer:旋转木马元素项容器,默认为ul
  • itemSelector:itemContainer的子元素,默认为li
  • style:在“coverflow”和“carousel”模式之间切换,默认为“coverflow”模式。
  • start:设置旋转木马的开始项并使它居中显示。
  • enableKeyboard:是否允许使用左右箭头按键来导航旋转木马,默认为true
  • enableMousewheel:是否允许使用鼠标滚动来导航旋转木马,默认为true
  • enableTouch:是否允许触摸滑动来导航旋转木马,默认为true
  • enableNav:如果设置为true,插件会插入一个项目类别和标题的无序列表来制作导航效果。默认为false
  • enableNavButtons:如果设置为true,插件会插入“Previous”和“Next”链接来前后导航旋转木马。
回调函数

onItemSwitch:当旋转木马进行切换时被调用。

高级应用

导航

该旋转木马插件可以为每一个旋转木马项创建一个链接的无序列表。需要在每一个<li>元素上设置ID和title属性,然后设置enableNav: true。例如:

<div class="flipster">
    <ul class="flip-items">
        <li id="Item-1" title="Item 1 Title">
            <img src="" alt="" />
        </li>
        <li id="Item-2" title="Item 2 Title">
            <img src="" />
        </li>
        ...
  </ul>
</div>                
              

将会输出下面的代码:

<ul class="flipster-nav">
<li class="flip-nav-item no-category"><a href="#Item-1" class="flip-nav-item-link">Item 1 Title</a></li>
<li class="flip-nav-item no-category"><a href="#Item-2" class="flip-nav-item-link">Item 2 Title</a></li>...
</ul>                
              
分类

导航列表也可以进行类别分组。需要在每一个<li>元素上设置data-flip-category属性以及ID和title属性,然后设置enableNav: true。例如:

<div class="flipster">
    <ul class="flip-items">
        <li id="Item-1" title="Item 1 Title" data-flip-category="Category 1">
            <img src="" alt="" />
        </li>
        <li id="Item-2" title="Item 2 Title" data-flip-category="Category 1">
            <img src="" />
        </li>
        <li id="Item-3" title="Item 3 Title" data-flip-category="Category 2">
            <img src="" />
        </li>
        <li id="Item-4" title="Item 4 Title" data-flip-category="Category 2">
            <img src="" />
        </li>
        <li id="Item-5" title="Item 5 Title">
            <img src="" />
        </li>
  </ul>
</div>                
              

将会输出下面的代码:

<ul class="flipster-nav">
    <li class="flip-nav-category">
        <a href="#" class="flip-nav-category-link" data-flip-category="Category 1">Category 1</a>
        <ul class="flip-nav-items">
            <li class="flip-nav-item"><a href="#Item-1" class="flip-nav-item-link">Item 1</a></li>
            <li class="flip-nav-item"><a href="#Item-2" class="flip-nav-item-link">Item 2</a></li>
        </ul>
    </li>
    <li class="flip-nav-category">
        <a href="#" class="flip-nav-category-link" data-flip-category="Category 2">Category 2</a>
        <ul class="flip-nav-items">
            <li class="flip-nav-item"><a href="#Item-3" class="flip-nav-item-link">Item 3</a></li>
            <li class="flip-nav-item"><a href="#Item-4" class="flip-nav-item-link">Item 4</a></li>
        </ul>
    </li>
    <li class="flip-nav-item no-category">
        <a href="#Item-5" class="flip-nav-item-link">Item 5 Title</a>
    </li>
</ul>                
              

浏览器兼容

已经测试的浏览器:

  • Chrome (latest)
  • Safari & Mobile Safari (latest)
  • Firefox (latest) (no mousewheel, no box reflections)
  • IE 10 (no mousewheel, no box reflections)

未经测试的浏览器:

  • IE 8 & 9 (no 3D transforms, 'compatibility mode')
  • IE <= 7
  • Android browsers
  • Opera