| direction |
滑动方向，可设置为水平方向切换 horizontal 或垂直方向切换 vertical 。 |
| slidesPerView |
设置scroller容器能够同时显示的slides数量 |
| spaceBetween |
在slide之间设置距离（单位px）,可设置百分比，如 '2%' |
| speed |
滑动速度 |
| ratio |
步进单位距离，默认0.5 |
function Scroller(obj,opt){
this.direction = opt&&opt.direction ? opt.direction : "horizontal";
this.timer = null;
this.container = null;
this.scroller = null;
this.wrapperWidth = 0;
this.wrapperHeight = 0;
this.slideWidth = 0;
this.slideHeight = 0;
this.slideSize = 0;
this.slidesPerView = opt&&opt.slidesPerView ? opt.slidesPerView : 1;
this.spaceBetween = opt&&opt.spaceBetween ? opt.spaceBetween : 0;
this.speed = opt&&opt.speed ? opt.speed : 20;
this.ratio = opt&&opt.ratio ? opt.ratio : 0.5;
this.distance = 0;
this.content = "";
let that = this;
this.start = function(){
if(this.direction == "vertical"){
this.timer = setInterval(() => {
that.distance += that.ratio;
//console.log(that.wrapperWidth,that.distance);
that.distance = that.distance > that.wrapperHeight ? 0 : that.distance;
that.scroller.css({"transform":"translateY(-"+ that.distance +"px)"});
},this.speed);
}else{
this.timer = setInterval(() => {
that.distance += that.ratio;
//console.log(that.wrapperWidth,that.distance);
that.distance = that.distance > that.wrapperWidth ? 0 : that.distance;
that.scroller.css({"transform":"translateX(-"+ that.distance +"px)"});
},this.speed);
}
}
this.stop = function(){
this.pause();
if(this.direction == "vertical"){
this.scroller.css({"transform":"translateY(0px)"});
}else{
this.scroller.css({"transform":"translateX(0px)"});
}
}
this.pause = function(){
if(this.timer){
clearInterval(this.timer);
this.timer = null;
}
}
this.distroy = function(){
this.scroller.html(this.content);
}
if(obj&&$(obj).size() > 0){
this.container = $(obj);
this.scroller = $(obj+" .scroll-wrapper");
this.container.css("overflow","hidden");
if(/%$/.test(this.spaceBetween)){
this.spaceBetween = this.container.width() * this.spaceBetween.replace("%",'') / 100;
}
if(this.slidesPerView !== 'auto'){
if(this.direction == "vertical"){
this.slideHeight = (this.container.height() - this.spaceBetween*(Math.floor(this.slidesPerView) - 1))/this.slidesPerView;
this.slideSize = this.scroller.children(".scroll-slide").size();
this.scroller.children(".scroll-slide").css({"height":this.slideHeight,"marginBottom":this.spaceBetween});
}else{
this.slideWidth = (this.container.width() - this.spaceBetween*(Math.floor(this.slidesPerView) - 1))/this.slidesPerView;
this.slideSize = this.scroller.children(".scroll-slide").size();
this.scroller.children(".scroll-slide").css({"width":this.slideWidth,"marginRight":this.spaceBetween});
}
}
this.wrapperWidth = this.scroller.width();
this.wrapperHeight = this.scroller.height();
if(this.direction == "vertical"){
if(this.wrapperHeight > this.container.height()){
this.content = this.scroller.html();
this.scroller.append(this.content);
this.start();
this.container.on("mouseover",function(){
that.pause();
}),
this.container.on("mouseout",function(){
that.start();
});
}
}else{
if(this.wrapperWidth > this.container.width()){
this.content = this.scroller.html();
this.scroller.append(this.content);
this.start();
this.container.on("mouseover",function(){
that.pause();
}),
this.container.on("mouseout",function(){
that.start();
});
}
}
}
$(window).on("resize",function(){
if(/%$/.test(that.spaceBetween)){
that.spaceBetween = that.container.width() * that.spaceBetween.replace("%",'') / 100;
}
if(this.slidesPerView !== 'auto'){
if(this.direction == "vertical"){
that.slideHeight = (that.container.height() - that.spaceBetween*(Math.floor(that.slidesPerView) - 1))/that.slidesPerView;
that.scroller.find(".scroll-slide").css({"height":that.slideWidth,"marginBottom":that.spaceBetween});
}else{
that.slideWidth = (that.container.width() - that.spaceBetween*(Math.floor(that.slidesPerView) - 1))/that.slidesPerView;
that.scroller.find(".scroll-slide").css({"width":that.slideWidth,"marginRight":that.spaceBetween});
}
}
that.wrapperWidth = that.scroller.width()/2;
});
}
