当前位置：首页 > 网页特效 > 幻灯片和轮播图

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

分类：幻灯片和轮播图日期：2024-05-14 点击(0) 评论(0)

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

简介

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

```html
<script src="js/GLSlideshow.min.js"></script>    
```     
#####  HTML结构
使用一个空的div元素来作为幻灯片的占位容器。
```html

<div id="slideshow-placeholder"></div>     
```  
#####  初始化插件
使用autoDetectRenderer()方法来创建一个WebGL幻灯片实例。

```html
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来调用这个插件。

```html
$( 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()

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果