Flux Slider插件的介绍与应用

• ：简介：
  

Flux slider 是基于的CSS3属性的动画框架，它可以实现多种2D和3D的图片转换效果，如翻书效果，漩涡，翻牌，光栅等。。。

平台：

• Safari
• Chrome
• iOS
• Blackberry Playbook
• Firefox 4
• Opera 11

可能支持的平台：

• Android 
  

要求：

浏览器必须支持css3的transformations 属性，并且有引入jquery库或Zepto.js

用法：

html部分：
<div id="slider">
    <img src="img/avatar.jpg" alt="" />
    <img src="img/ironman.jpg" alt="" title="Ironman Screenshot" />
    <a href=""><img src="img/imagewithlink.jpg" alt="" /></a>
    <img src="img/tron.jpg" alt="" />
</div>
js部分：

$(function(){
    window.myFlux = new flux.slider('#slider');
});

如果是引入jquery的话还可以使用下面的方法：

$(function(){
    window.myFlux = $('#slider').flux();
});

属性：

• autoplay ：自动播放（默认为false）

• pagination ：是否显示页数（默认为false）

• controls：控制条（默认为false）

• captions ：标题栏，从img的title属性读取（默认为false）

• transitions ：转换形式，以数组形势存在（默认为随机)
  【2D:"bars","blinds","blocks","blocks2","concentric","dissolve","slide","warp","zip"】
  【3D:"bars3d","blinds3d","cube","tiles3d","turn"】

• delay :时间（默认400ms）
  

播放控制方法：

• start() 开始自动播放
• stop() 停止自动播放
• isPlaying() 判断当前是否有在自动播放

转换控制方法：

• next([transition [, options]])：显示下一张图片

  transition：转换方式，缺省随机

  options：属性，只作用于这张图片

• prev([transition [, options]])：显示上一张图片（类似next（））

• showImage(index [, transition [, options]])：显示索引为index的图片

其他：

getImage(index)：返回某张图片

事件机制：

fluxTransitionEnd ：js事件

eg：

$('#slider').bind('fluxTransitionEnd', function(event) {
    var img = event.data.currentImage;
    // Do something with img...
});

onTransitionEnd ：图片转换完的回调函数

eg：

window.myFlux = $('#slider').flux({
    autoplay: false,
    pagination: true,
    onTransitionEnd: function(data) {
        var img = data.currentImage;
        // Do something with img...
    }
});

编写自己的图片转换方式：

eg：

flux.transitions.bars = function(fluxslider, opts) {
    return new flux.transition(fluxslider, $.extend({
        barWidth: 60,
        setup: function() {

        },
        execute: function() {

        }
    }, opts));  
}

flux.browser：是一个对象帮助我们判断浏览器对css3的支持程度

• supportsTransitions：判断浏览器是否支持CSS3 transitions属性

• supports3d ：判断浏览器是否支持CSS3 t 3D ransitions属性

• translate(x, y, z)：返回flux.browser.translate() 

• rotate(axis, deg)：返回flux.browser.rotate('x', deg) 

• rotateX(deg) ：返回flux.browser.rotate('x', deg)的结果，要求支持css3 3D ransitions属性

• rotateY(deg)：返回flux.browser.rotate('y', deg)的结果，要求支持css33D ransitions属性

• rotateZ(deg)：返回flux.browser.rotate('z', deg)的结果，要求支持css33D ransitions属性

下载链接