给div添加2个事件,用于暂停和继续;
<divref="imgListBox"@mouseenter="handleImgListMouseEnter" @mouseleave="handleImgListMouseLeave" ><img/></div>
startAutoScroll(length) {
this.handleImgListMouseEnter();
let num = 0;
let scrollDistance = 0;
this.imgListTime = setInterval(() => {
num++;
if (num >= length - 4) num = 0;
scrollDistance = 350 * num;
this.animateScroll(scrollDistance);
}, 2000);
},
handleImgListMouseEnter() {
if (this.imgListTime) clearInterval(this.imgListTime);
},
handleImgListMouseLeave() {
this.startAutoScroll(this.imgList.length);
},
animateScroll(scrollLeft) {
let start = null;
let that=this
function step(timestamp) {
if (!start) start = timestamp;
const progress = timestamp - start;
const scrollDistance = 350;
const easeInOutQuad = t => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
that.$refs.imgListBox.scrollLeft = (scrollLeft-350) + scrollDistance * easeInOutQuad(Math.min(progress / 1000, 1));
if (progress < 1000) {
requestAnimationFrame(step);
}
}
requestAnimationFrame(step);
},