Flux slider 轮播图插件使用

 

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

平台：

 

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

配置选项

The <flux.slider> constructor can also take an optional second parameter which is an object of key/value configuration options.

• 自动播放布尔（默认：威胁）

  是否应该开始自动播放滑块

• 分页布尔（默认值是false）

  是否显示分页控制手动选择显示图像

• 控制装置布尔（默认值是false）

  是否显示下/预防控制

• 字幕布尔（默认值是false）

  是否显示标题栏。标题是从title属性加载IMG元素

• 转换阵列（默认：所有可用的转换）

  一个的过渡使用名称的数组，可用的选项是：

  • 2D
    • bars
    • blinds
    • blocks
    • blocks2
    • concentric
    • dissolve需要面具的支持
    • slide
    • warp
    • zip
  • 3D
    • bars3d
    • blinds3d
    • cube
    • tiles3d
    • turn

• 延迟整数（默认值：4000）

  图像转换之间等待的毫秒数

例如，为了防止自动播放和显示分页控制你会做以下：

$(function(){
	window.myFlux = new flux.slider('#slider', {
		autoplay: false,
		pagination: true
	});
});

或用jQuery插件：

$(function(){
	window.myFlux = $('#slider').flux({
		autoplay: false,
		pagination: true
	});
});

flux.slider API

API函数使用本地JavaScript对象和jQuery插件。例如:

// Show next image using the bars3d transition (native Javascript object)
window.myFlux.next('bars3d');

或

// Show next image using the bars3d transition (jQuery widget)
window.myFlux.flux('next', 'bars3d');

注：所有的jQuery插件功能，可除了那些返回特定的东西，如isPlaying()&#38;getimage()

在使用jQuery插件的更多信息见jQuery doc；

播放控制

• start()启用自动播放
• stop()禁用自动播放
• isPlaying()返回一个布尔值，至于是否自动播放当前启用

交通管制

• next([transition [, options]])

  显示下一个图像

  transition（可选）要用过渡的名字，否则一个随机选择的

  options（可选）这个过渡转型的具体选项只有

• prev([transition [, options]])

  显示以前的图像

  transition（可选）要用过渡的名字，否则一个随机选择的

  options（可选）这个过渡转型的具体选项只有

• showImage(index [, transition [, options]])

  显示图像index

  transition（可选）要用过渡的名字，否则一个随机选择的

  options（可选）这个过渡转型的具体选项只有

其他

• getImage(index)返回的图像与所提供的指标

转换完成时接收通知

有时你可能想知道当一个过渡已经完成，或者说当前显示的图像已经改变了。

通量提供了一些机制，这：

fluxTransitionEndJavaScript事件

之后的每一个过渡，流量调度fluxTransitionEnd事件听这些事件，你可以做以下：

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

onTransitionEnd回调函数

You can alternatively pass in a callback function as part of the configuration options when you instantiate Flux, e.g.

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

编写自定义转换

编写您自己的自定义转换很容易，你只需要创建一个实例flux.transition在一些回调函数对象，通过提供自定义行为你寻找。

让我们看看了酒吧转型为例。过渡的准系统的定义看起来像：

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

在这里，我们添加了一个新的功能的flux.transitions的空间称为酒吧。这个函数有两个参数，一个flux.slider对象和选择键/值对象。

注：目前不可能通过选项为过渡从核心flux.slider代码，但因为这是事情的列表添加一个好主意，确保转换处理时实现！

我们创建的函数应该返回一个新的flux.transition对象，通过在flux.slider随着一系列选择参数

所有的过渡对象自动获得以下：

• this.slider

  这个flux.slider对象传递到构造函数。从这个对象可以访问当前图像this.slider.image1和下一个图像this.slider.image2

• this.options

  通过在第二个参数的选择flux.transition构造函数调用

setup()

两种功能是经营转型的需要，首先是setup。这个函数负责初始化DOM之前的过渡运行。在本案的酒吧过渡这个函数创建一个DIV每个酒吧和设置背景图像，相邻的酒吧出现作为一个单一的图像。

设置功能也应该初始化需要使一个CSS过渡CSS3特性。

setup: function() {
	var barCount = Math.floor(this.slider.image1.width() / this.options.barWidth) + 1

	var delayBetweenBars = 40;

	for(var i=0; i<barCount; i++) {
		var bar = $('<div></div>').attr('class', 'bar bar-'+i).css({
			width: this.options.barWidth+'px',
			height: '100%',
			position: 'absolute',
			top: '0',
			left: (i*this.options.barWidth)+'px',
		
			'background-image': this.slider.image1.css('background-image'),
			'background-position': '-'+(i*this.options.barWidth)+'px 0px'
		}).css3({
			'transition-duration': '400ms',
			'transition-timing-function': 'ease-in',
			'transition-property': 'all',
			'transition-delay': (i*delayBetweenBars)+'ms'
		});
		this.slider.image1.append(bar);
	}
}

一个辅助函数调用.css3()已为方便自动添加前缀的CSS3属性创建供应商。任何属性，需要前缀应该增加通过该功能而不是.css（）为确保过渡是跨浏览器兼容。

execute()

这个execute功能是在CSS应该作出改变，作为过渡已经初始化，在setup()应用端的CSS属性的状态应该是我需要的：

execute: function() {
	var _this = this;

	var height = this.slider.image1.height();

	var bars = this.slider.image1.find('div.bar');

	// Get notified when the last transition has completed
	$(bars[bars.length-1]).transitionEnd(function(){
		_this.finished();
	});

	bars.css({
		'opacity': '0.5'
	}).css3({
		'transform': flux.browser.translate(0, height)
	});
}

另外两个便利的功能已被使用，这个例子。第一.transitionEnd()是一个跨浏览器的事件函数捕捉过渡结束事件。在这个例子中我们要得到通知时，最后一棒完成的动画，这是我们知道转换完成。然后我们可以进行一些自定义代码，但重要的是要记住调用转换finished()功能以确保DOM是一过渡复位。

转型写作指南

这里有一些指导写作的过渡如果你想让他们考虑到的主要分布：

• 如果转型需要3D变换必须设置requires3d属性真正的。例如

  flux.transitions.bars3d = function(fluxslider, opts) {
  	return new flux.transition(fluxslider, $.extend({
  		requires3d: true,
  		setup: function() {
  			...
  		}
  	}
  };
  

• 延迟动画具体酒吧/块/瓦的使用-[webkit/moz/o]-transition-delay而不是settimeout()/setInterval()。这让GPU来处理时间和平滑的过渡。

• 当使用许多新的酒吧/块/瓷砖，将它们添加到容器中的元素从DOM然后一起加入容器，如

  var container = $('<div></div>');
  
  for(var i=0; i<10; i++) {
  	var elem = $('<div></div');
  	container.append(elem);
  }
  
  this.image.slider1.append(container);
  

flux.browser

flux.browser是一个对象，旨在帮助确定浏览器支持CSS3转换。

• supportsTransitions布尔

  就当前的浏览器支持CSS3转换？

• supports3d布尔

  就当前的浏览器支持3D CSS3转换？

• translate(x, y, z)

  返回一个CSS翻译字符串最适合当前的浏览器，例如在iOS在3D变换的支持flux.browser.translate(10, 20)会回来的（10, 20, 0）translate3d从而触发硬件加速

• rotate(axis, deg)

  操作同上面的翻译功能，返回当前浏览器的最合适的CSS。

• rotateX(deg)

  返回调用结果flux.browser.rotate('x', deg)需要3D转换支持

• rotateY(deg)

  返回调用结果flux.browser.rotate('y', deg)需要3D转换支持

• rotateZ(deg)

  返回调用结果flux.browser.rotate('z', deg)