基于WebGL的炫酷2D幻灯片插件

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

使用方法

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

<script src="js/GLSlideshow.min.js"></script>         
                

HTML结构

使用一个空的<div>元素来作为幻灯片的占位容器。

<div id="slideshow-placeholder"></div>       
                

初始化插件

使用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()

GLSlideshow.js幻灯片插件的github地址为：https://github.com/yomotsu/GLSlideshow.js