angular n'g-zorro走马灯划过时如何停止切换_nz-carousel被点击后自动切换停止-优快云博客

本文链接：https://blog.youkuaiyun.com/orange_cccc/article/details/82623629

本文介绍如何利用ng-zorro中的走马灯组件实现鼠标悬停时自动切换图片的功能停止。通过监听鼠标事件并结合[nzAutoPlay]属性控制自动播放状态，实现了动态效果的交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
    }