angular n’g-zorro走马灯划过时如何停止切换

在写项目时，我用到了ng-zorro这个控件，后来经理想在鼠标划过时能停止swipper自动切换，我想了一下

，最后发现zorro的走马灯有一个[nzAutoPlay]属性可以直接控制是否切换，话不多说，直接上代码:

       <div class=" bottomLeft" #myCarousel><nz-carousel [nzEffect]="'scrollx'" [nzAutoPlay]="carouselPlay" [nzAutoPlaySpeed]="'5000'" #zd><div nz-carousel-content *ngFor="let table of stationData"><div class="tabContain"><p class="date-place"><span>2018年8月24日 星期五 </span></p></div>                           </nz-carousel></div>

import { Observable, observable } from 'rxjs';@ViewChild('myCarousel') myCarouselEle: ElementRef;carouselPlay = true;ngAfterViewInit() {this.carouselPlay = true;let mouseover = Observable.fromEvent(this.myCarouselEle.nativeElement, 'mouseover');mouseover.subscribe(() => {this.stopCarousel();});let mouseleave = Observable.fromEvent(this.myCarouselEle.nativeElement, 'mouseleave');mouseleave.subscribe(() => {this.autoCarousel();});}stopCarousel() {this.carouselPlay = false;}autoCarousel() {this.carouselPlay = true;}

angular n'g-zorro走马灯划过时如何停止切换相关推荐

[html] 写一个类似刮刮卡效果的交互，即鼠标划过时显示号码
[html] 写一个类似刮刮卡效果的交互,即鼠标划过时显示号码 <title>Document</title> <style> *{ margin:0; paddi ...
css鼠标划过时的一些小特效
css部分----------- .div1{width: 100px; height: 100px; border: 1px solid; position: relative; backgroun ...
《div图层被鼠标划过时其背景色变色的五种方式》
概述: 同样是为了提高用户体验程度,本篇内容将叙述:div图层被鼠标划过时其背景色改变,鼠标离开相关div图层时其颜色变为原来的颜色.实现上述效果下面总结了五种实现方式,请您耐心阅读,或许会有点收获. ...
ng-zorro 走马灯滑过停止切换，以及切换速度
ng-zorro 走马灯滑过停止切换,以及切换速度 @ViewChildren(NzCarouselComponent) carousels: any;@ViewChild('weatherCarou ...
ngzorro html源码,angular使用NG ZORRO来构建博客展示项目(简单实现展示页面)
使用 NG ZORRO 在上一篇文章中,我们已经安装了NG ZORRO,并在跟模块中引入了,在子模块中使用还需要再次引入. 编辑layout模块中的header组件在layout.module.ts ...
CSS-鼠标划过时的样式
/*鼠标划过变小手*/cursor: pointer; 其他样式: auto :标准光标default :标准箭头pointer, hand :手形光标wait :等待光标text :I形光标vert ...
html鼠标经过事件便箭头,为啥我的代码，鼠标滑过显示是箭头，而其他同学划过时都是手指？？？？？？？？？...
以下是我的源代码. 页码的制作 /*在此定义相关CSS样式*/ * { margin:0; padding:0; font-size:12px; font-family:微软雅黑; } .page { ...
利用悬浮窗加PopupWindow实现从手机屏幕右边划出应用快捷切换
效果如上图所示安卓小白记录学习过程.一起交流学习.有问题请多多指出.话不多说进入正题. 一.思路首先明确需求,我们需要做一个右划弹出一个快捷切换应用的弹窗. 悬浮窗可以在其他应用上层显示出来,那么 ...
vue走马灯点击左右可切换
html <div class="aa" style="display: flex"><!-- <button @click=" ...

angular n'g-zorro走马灯划过时如何停止切换

angular n’g-zorro走马灯划过时如何停止切换

angular n'g-zorro走马灯划过时如何停止切换相关推荐

最新文章

热门文章