定义一个banner.js文件，代码如下
;window.requestAnimationFrame = window.requestAnimationFrame||function(a){return setTimeout(a,1000/60)};
window.cancelAnimationFrame = window.cancelAnimationFrame||clearTimeout;
var FragmentBanner = function(option) {
//实例化时，可传的参数
this.whiteList = ['container','controller','size','imgs','size','grid','index','fnTime','boxTime','type'];
//容器将包容控制器
this.container = '.banner';
//默认的控制器
this.controller = {
view : '.banner-view',
btn : '.banner-btn',
num : '.banner-number',
progre : '.banner-progres'
};
//栅格 行*列
this.grid = {
line : 5,
list : 10
};
//容器的大小
this.size = {
width : 1200,
height : 675,
};
//切换类型
this.type = 1;
//索引位置
this.index = 0;
//函数每次切换时间
this.fnTime = 5000;
//栅格每次运动时间
this.boxTime = 2000;
//栅格运动结束的时间
this.activeTime = new Date();
for(var a = 0,attrLenght = this.whiteList.length; a < attrLenght;a++){
var attr = this.whiteList[a];
if(option[attr] != undefined){
this[attr] = option[attr];
}
}
for(var i in option){
if(this.whiteList[i] !== undefined){ ; }
}
init();
}
function setIndex(){
this.index %= this.imgs.length;
this.index = (this.index < 0) ? this.imgs.length - 1 : this.index;
this.elem.numFind[this.index].className = 'on';
}
function init(){
this.container = document.querySelector(this.container)
if(!this.container){
return alert('获取banner容器失败');
}else{
this.container.style.width = this.size.width+'px';
this.container.style.height = this.size.height+'px';
}
this.elem = {};
for(var e in this.controller){
this.elem[e] = this.container.querySelector(this.controller[e]);
if(this.elem[e] == null){
return alert('获取'+e+'容器');
}
}
//栅格
var w = this.size.width / this.grid.list,
h = this.size.height / this.grid.line;
this.elem.viewBox = new Array();
for(var i = 0,iL = this.grid.line;i < iL;i++){
for(var j = 0,jL = this.grid.list;j < jL;j++){
var newI = document.createElement('i');
setCss(newI,{
width : w+'px',
height : h+'px',
left : 0,
top : 0,
opacity : 1,
backgroundImage : 'url("'+this.imgs[this.index]+'")',
backgroundSize : this.size.width + 'px ' + this.size.height +'px',
backgroundPosition : w * -j+'px ' + h * -i+'px'
});
this.elem.view.appendChild(newI);
this.elem.viewBox.push(newI);
