vue.js层叠轮播效果的实例代码层叠轮播效果的实例代码
最近写公司项目有涉及到轮播banner，一般的ui框架无法满足产品需求；所以自己写了一个层叠式轮播组件；现在分享给大
家；
主要技术栈是vue.js ;javascript;jquery；确定实现思路因工作繁忙，暂时不做梳理了；直接贴代码参考；
此组件是基于jquer封装，在vue项目中使用首先需要先安装jquery插件：指令：npm install jquery,安装完成之后再
webpack.base.conf.js配置插件：
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
]
主要实现逻辑js文件：postercarousel.js；
代码如下：
(function(jq){
function postercarousel(o, options, data){
this.parent = jq("#"+ o);
this.body = jq("body");
if (this.parent.length <= 0) {
return false;
}
this.options = jq.extend({}, postercarousel.options, options);
if(typeof(data) !== 'object') return false;
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(var i=1; i<= this.total; i++){
var bottomItem = document.createElement("DIV");
剩余7页未读，继续阅读
资源评论
