html5下拉幻灯片插件,基于WebGL的炫酷2D幻灯片插件

GLSlideshow.js是一款基于WebGL的炫酷2D幻灯片插件。该幻灯片支持多种过渡效果：波浪效果，立方体效果，风吹效果等。在旧的IE浏览器中它会自动回退为2D Canvas来显示幻灯片。

使用方法

使该幻灯片插件需要在页面中引入GLSlideshow.min.js文件。

HTML结构

使用一个空的

元素来作为幻灯片的占位容器。

初始化插件

使用autoDetectRenderer()方法来创建一个WebGL幻灯片实例。

var slideshow = GLSlideshow.autoDetectRenderer(

[ './img/1.jpg', './img/2.jpg', './img/3.jpg', './img/4.jpg' ],

{

width: 1024, // optional

height: 576, // optional

duration: 1000, // optional

interval: 5000, // optional

effect: 'crossZoom' // optional

}

);

document.getElementById( 'slideshow-placeholder' ).appendChild( slideshow.domElement );

你也可以使用jQuery来调用这个插件。

$( function () {

var slideshow = GLSlideshow.autoDetectRenderer(

[ './img/1.jpg', './img/2.jpg', './img/3.jpg', './img/4.jpg' ],

{

width: 1024, // optional

height: 576, // optional

duration: 1000, // optional

interval: 5000, // optional

effect: 'crossZoom' // optional

}

);

$( '#slideshow-placeholder' ).append( slideshow.domElement );

} );

配置参数

该幻灯片插件的配置参数如下：

width：幻灯片的宽度。

height：幻灯片的高度。

duration：动画的持续时间。

interval：动画的过渡间隔时间。

effect：动画效果。可选的效果有：crossFade，crossZoom，cube，wind，ripple，pageCurl。

API

instance.pause()

instance.play()

instance.getCurrent()

instance.getPrev()

instance.getNext()

instance.setSize( width, height )

instance.insert( image, order )

instance.remove( order )

instance.transition( to )

instance.setEffect( effectName [, uniforms ] )

instance.dipose()