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

当前位置:主页 > Html5库 > html5 canvas > 基于WebGL的炫酷2D幻灯片插件
基于WebGL的炫酷2D幻灯片插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2016-05-22
    阅读:
麦子学院
简要教程

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

网友评论