#Benner-Effect banner效果 基于CSS3实现的banner特效

##功能

• 支持配置图片及链接

• 支持事件回调等

• 仅支持高级浏览器

• 支持5种切换效果：爆炸、翻转、翻页、扭曲、立方体

• boomEffect（爆炸）

• turnEffect（翻转）

• pageEffect（翻页）

• skewEffect（扭曲）

• cubeEffect（立方体）

  
  

  
  

引入主文件方法：

<!-- 样式文件 -->

<link rel="stylesheet" href="../css/style-banner.css">

<!-- js文件 -->

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

<script src="../js/banner-effect.js"></script>

调用方法与参数：

var banner = new Banner({

banner: '#banner_img',       // banner dom（不包含子元素）

        index: 0,           // 设定初始化时banner的索引

        autoplay: 3000,     // 自动切换的时间间隔（单位ms），不设定该参数banner不会自动切换

        width: 1200,        // banner宽度

        height: 300,        // banner高度

        // 图片相关

        images: [{

        url: '../img/banner/1.jpg',

        link: 'http://www.yu313.cn'

        }, {

        url: '../img/banner/2.jpg',

        link: 'javascript:;'

        }, {

        url: '../img/banner/3.jpg',

        link: 'javascript:;'

        }, {

        url: '../img/banner/4.jpg',

        link: 'javascript:;'

        }],         // 图片url列表

        preloadImages: true,// 预加载所有图片

        // 分页及控制

        pagination: '.js_banner_nav',     // 分页dom

        paginationClick: true,  // 分页是否可点击

        prevButton: '.js_banner_prev',     // 下一张dom

        nextButton: '.js_banner_next',     // 上一张dom

        // 回调函数

        onInit: function(){

        console.log('init');

        },     // 初始化后执行

        onClick: function(event, index){

        console.log('onClick: ' + index);

        },    // 点击banner后执行

        onBannerChange: function(){

        console.log('onBannerChange');

        },  // banner切换后执行

        Effects: 'turnEffect'

        // Effects: {

        // 'prev': 'turnEffect',

        // 'next': 'boomEffect',

        // 'navi': 'pageEffect'

        // },        // 切换效果

});