vue.js层叠轮播效果的实例代码
最近写公司项目有涉及到轮播banner，一般的ui框架无法满足产品需求；所以自己写了一个层叠式轮播组件；现在分享给大家；
主要技术栈是vue.js;javascript;jquery；确定实现思路因工作繁忙，暂时不做梳理了；直接贴代码参考；
此组件是基于jquer封装，在vue项目中使用首先需要先安装jquery插件：指令：npminstalljquery,安装完成之后再webpack.base.conf.js配置插件：
plugins:[
newwebpack.ProvidePlugin({
$:'jquery',
jQuery:'jquery'
}),
]
主要实现逻辑js文件：postercarousel.js；
代码如下：
(function(jq){
functionpostercarousel(o,options,data){
this.parent=jq("#"+o);
this.body=jq("body");
if(this.parent.length<=0){
returnfalse;
}
this.options=jq.extend({},postercarousel.options,options);
if(typeof(data)!=='object')returnfalse;
this.data=data||{};
this.reset();
//处理页面resize
var_this=this;
jq(window).resize(function(){
_this.reset();
});
};
postercarousel.prototype={
reset:function(options){
if(typeof(options)=='object'){
jq.extend(this.options,options);
}
if(parseInt(this.body.outerWidth())>1255||navigator.userAgent.indexOf('iPad')!==-1){
this.options.width=970;
}else{
this.options.width=970;
}
this.total=this.data.length;
this.pageNow=this.options.initPage;
this.preLeft=0;
this.nextLeft=this.options.width-530;
this.preNLeft=-530;
this.nextNLeft=this.options.width;
this.pageNowLeft=(this.options.width-640)/2
this.drawContent();
},
drawContent:function(){
this.parent.empty();
this.parent.css({width:this.options.width+"px",height:this.options.height+"px",position:"relative"});
this.content=document.createElement("DIV");
this.content.className=this.options.className;
this.content.cssText="width:"+this.options.width+"px;height:"+this.options.height+"px;cursor:move;position:absolute;";
this.bottomNav=document.createElement("DIV");
this.bottomNav.className="bottomNav";
for(vari=1;i<=this.total;i++){
varbottomItem=document.createElement("DIV");
bottomItem.className="bottomNavButtonOFF";
if(i==this.pageNow){
bottomItem.className="bottomNavButtonOFFbottomNavButtonON";
}
bottomItem.setAttribute("ref",i);
this.bottomNav.appendChild(bottomItem);
}
this.content.appendChild(this.bottomNav);
this.bannerControls='