- :简介:
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) :
返回
的结果,要求支持css3 3D ransitions属性flux.browser.rotate('x', deg)
-
rotateY(deg)
:返回
的结果,flux.browser.rotate('y', deg)
要求支持css33D ransitions属性
-
rotateZ(deg)
:返回
的结果,flux.browser.rotate('z', deg)
要求支持css33D ransitions属性