class Roll {
constructor(opts) {
this.elem = opts.elem; // 图片包含滚动长度的元素的
this.elemBox = opts.elemBox; //图片展示区域元素,为了获取展示区域的高度
this.direction = opts.direction;
this.time = opts.time;
this.init();
this.roll = this.roll.bind(this)
this.startRoll = this.startRoll.bind(this)
this.stopRoll = this.stopRoll.bind(this)
}
init(){
this.elemHeight = this.elem.offsetHeight;
this.elemHtml = this.elem.innerHTML;
this.elem.innerHTML = this.elem.innerHTML + this.elemHtml+ this.elemHtml;
this.speed;
// 如果向上滚或者向左滚动每次减
1
,向下滚或者向右滚动每次加
1
if(this.direction ===
'top'
|| this.direction ===
'left'
){
this.speed =
-1
;
}else{
this.speed =
1
;
}
}
roll(){
switch (this.direction) {
case
"top"
:
// 如果滚动的盒子的
top
值超出元素的高度,则置为
0
if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){
this.elemBox.style.
top
=
0
;
}else{
this.elemBox.style.
top
= this.elemBox.offsetTop + this.speed +
'px'
;
}
break;
case
"bottom"
:
// 如果滚动的盒子的
bottom
值超出元素的高度,则置为
0
if(Math.abs(this.elemBox.offsetBottom) >= this.elemHeight){
this.elemBox.style.
bottom
=
0
;
}else{
this.elemBox.style.
bottom
= this.elemBox.offsetBottom + this.speed +
'px'
;
}
break;
case
"left"
:
// 如果滚动的盒子的
left
超出元素的高度,则置为
0
if(Math.abs(this.elemBox.offsetLeft) >= this.elemHeight){
this.elemBox.style.
left
=
0
;
}else{
this.elemBox.style.
left
= this.elemBox.offsetLeft + this.speed +
'px'
;
}
break;
case
"right"
:
// 如果滚动的盒子的
right
超出元素的高度,则置为
0
if(Math.abs(this.elemBox.offsetRight) >= this.elemHeight){
this.elemBox.style.
right
=
0
;
}else{
this.elemBox.style.
right
= this.elemBox.offsetRight + this.speed +
'px'
;
}
break;
default:
// 默认向上滚动,如果滚动的盒子的
top
超出元素的高度,则置为
0
if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){
this.elemBox.style.
top
=
0
;
}else{
this.elemBox.style.
top
= this.elemBox.offsetTop + speed +
'px'
;
}
}
}
stopRoll(){
clearInterval(this.scrollTimer)
}
startRoll(){
this.scrollTimer = setInterval(this.roll,this.time)
}
}