HarmonyOS 如何实现视频轮播图，可以自动循环播放，鼠标拖动后可以正常循环播放

参考示例如下：

class Item {
  img: ResourceStr = '';
  title: string = '';
  url: string = ''
}

@Entry
@Component
struct Index {
  index: number = 0
  @State NoteLists: Array<Item> = [
    { img: $r('app.media.app_icon'), title: '头像1号', url: 'https:xxx1' },
    { img: $r('app.media.app_icon'), title: '头像2号', url: 'https:xxx2' },
    { img: $r('app.media.app_icon'), title: '头像3号', url: 'https:xxx3' },
    { img: $r('app.media.app_icon'), title: '头像4号', url: 'https:xxx4' },
    { img: $r('app.media.app_icon'), title: '头像5号', url: 'https:xxx5' },
    { img: $r('app.media.app_icon'), title: '头像6号', url: 'https:xxx6' }]
  scroller: Scroller = new Scroller()
  intervalID: number = 0;

  build() {
    Row() {
      Column() {
        Scroll(this.scroller) {
          Row() {
            ForEach(this.NoteLists, (item: Item) => {
              Column() {
                Image(item.img)
                  .width(60)
                  .height(60)
                Text(item.title)
              }
              .backgroundColor(Color.Orange)
              .width(150)
              .height(150)
              .justifyContent(FlexAlign.SpaceBetween)
              .onClick(() => {

                console.info('点击...' + item.url)

              })
            })
          }
        }
        .width('100%')
        .scrollable(ScrollDirection.Horizontal)
        .scrollBar(BarState.Off)
      }
      .width('100%')
    }
    .height('100%')
  }

  onPageShow() {
    this.intervalID = setInterval(() => {
      if (this.index == 6) {
        this.index = 0
      }
      console.log("index is:" + this.index)
      let currentIndex: number = this.index;
      let xOffset: number = this.scroller.currentOffset().xOffset;
      this.NoteLists.push(this.NoteLists[currentIndex]);
      this.index = currentIndex + 1;
      this.scroller.scrollTo({ xOffset: xOffset + 1, yOffset: 0 })
    },
      50)
  }

  onPageHide(): void {
    clearInterval(this.intervalID)
  }
}