ng-zorro 走马灯滑过停止切换,以及切换速度
@ViewChildren(NzCarouselComponent) carousels: any;
@ViewChild('weatherCarousel') weatherCarouselEL: ElementRef;
@ViewChild('waterCarousel') waterCarouselEL: ElementRef;
// 水质和气象滚动控制, 鼠标移入移出事件绑定
waterAndWeatherPlaySet() {
// 站点分析
let mouseover = Observable.fromEvent(this.weatherCarouselEL.nativeElement, 'mouseover');
this.subers.weatherMouseover = mouseover.subscribe(() => {
this.weatherCarouselPlay = false;
});
let mouseleave = Observable.fromEvent(this.weatherCarouselEL.nativeElement, 'mouseleave');
this.subers.weatherMouseleave = mouseleave.subscribe(() => {
this.weatherCarouselPlay = true;
});
let waterMouseOver = Observable.fromEvent(this.waterCarouselEL.nativeElement, 'mouseover');
this.subers.waterMouseover = waterMouseOver.subscribe(()=> {
this.waterCarouselPlay = false;
});
let waterLeave = Observable.fromEvent(this.waterCarouselEL.nativeElement, 'mouseleave');
this.subers.waterMouseleave = waterLeave.subscribe(()=>{
this.waterCarouselPlay = true;
});
// waterCarouselEL
this.carousels._results.forEach((comp, idx) => {
if(idx === 1) {
const waterTimer = setInterval(()=> {
if(this.waterCarouselPlay) {
comp.next();
}
// console.log('跳转到下一个 panel');
}, 7000);
this.timer.push(waterTimer);
}
if (idx === 0) {
const weatherTimer = setInterval(() => {
if (this.weatherCarouselPlay) {
comp.next();
}
}, 6000);
this.timer.push(weatherTimer);
}
});
}