支持图片和视频的轮播图

场景描述

图片和视频存在数据集中，轮播图显示数据集中的图片和视频。轮播图自动切换时，不播放视频。视频播放时，轮播图暂停自动切换

实现思路

使用走马灯组件、图片组件、视频组件和动态列表组件实现。走马灯组件可设置为自动切换，当鼠标进入后暂停自动切换，鼠标离开后恢复自动切换

实现步骤

1 准备数据

将图片和视频存储于数据集中，并标识出是图片还是视频，用于控制，在轮播图中显示图片组件还是视频组件

2 添加走马灯组件、图片组件、视频组件

走马灯组件支持添加静态的多个面板，也支持通过动态列表，根据数据动态生成面板。

• 本例使用动态列表根据数据动态生成面板
• 在面板中添加图片组件，设置动态隐藏，是图片则显示否则隐藏
• 在面板中添加区块组件，在区块组件中添加视频组件，设置区块组件的动态隐藏，是视频则显示否则隐藏

自动切换、悬停暂停和指示器悬停暂停都设置为true表示，默认轮播图自动切换，当鼠标进入轮播图范围则停止自动切换，离开后恢复自动切换

3 播放视频暂停走马灯的自动切换

在视频组件的播放事件中，调用走马灯组件的pause方法，暂停自动切换，示例代码如下

onVideo2Play(event){
    this.comp("carousel0").pause();
}

4 视频暂停后恢复走马灯的自动切换

在视频组件的暂停事件中，调用走马灯组件的getAutoplay方法获取自动切换属性的值，如果自动切换为true，则调用走马灯组件的play方法，恢复自动切换，示例代码如下

onVideo2Pause(event){
    let lbt = this.comp("carousel0");
    if(lbt.getAutoplay()){
        lbt.play();
    }
}