jquery宽屏banner轮播插件foxbanner

安装方法：

载入必须的文件

jquery.js

underscore.js

fox.core.js

dist/fox.banner.js

CSS需要放到你的css文件里面去，或者新建一个CSS样式文件放进去

#banner{ height: 250px; overflow: hidden; position: relative;}
.banner-left,.banner-right{display:block; display: none; width:50px;height:50px;background:red;position:absolute;top:50%;margin-top:-25px;z-index:21;}
.banner-right{right:0;}
.banner-left{left:0;}
.banner-dotwrap i{display:inline-block;width:20px;height:20px;line-height:20px;color:#fff;border-radius:50%;background:#6a757f;position:relative;top:-31px;font-style:normal;cursor:pointer;margin:0 4px;text-align:center;font-size:14px;}
.banner-dotwrap i.curr{background:#ea9acd;color:#fff;}
.banner-dotwrap{position:absolute;text-align:center;bottom:0;left:0;width:100%;z-index:21;height:1px;text-align:center;}
.banner-item{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;overflow:hidden;}
.banner-item img{position:relative;left:50%;margin:0 0 0 -960px;}
.banner-item-first{z-index:2;}

插件配置：

fox('#banner').banner({
    data : undefined,         //传数据，可以是数组，也可以是json数据字符串，不填则默认找div下面的input的
    css : '',                 //css
    // width : 200,           //默认为100%
    // height : 200,          //默认为250px
    auto : true,              //是否自动播放
    autotime : 3000,          //自动播放间隔
    effect : 1,               //特效类型 0：渐变；1：左右;
    efftime : 200,            //渐变时间
    // hideDot : true,        //隐藏小圆点传ture， 不传显示
    // hideBtn : true,        //隐藏按钮传ture, 不传显示
    // lazytime : 'scroll'    //延时加载时间
});

默认只加载第一张图片，过两秒后加载另外的图片，让首屏加载更快，主要用到了fox.core插件

1、加了时间参数jquery on事件的优化。

2、datalazy的简单实现。

3、简单的模块化写功能。

4、banner图片的延时加载，以及整块的滚动加载。