# oop-carousel-demo

**Repository Path**: kevinleeeee/oop-carousel-demo

## Basic Information

- **Project Name**: oop-carousel-demo
- **Description**: 这是一个基于面向对象开发的轮播图案例。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-05-14
- **Last Updated**: 2023-05-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 面向对象案例
这是一个基于面向对象的轮播图案例。
## 特征
- 继承
- 动态模块导入
- 插件化
## 功能
- 淡入淡出([animate.css](https://animate.style/))
- 无缝轮播(`translate3d`)
## 技巧
当在类里定义`getter`和`setter`函数，访问或修改该属性都会触发函数的执行，所以在函数内部可以定义一些方法的执行，如更新渲染等。
````JS
class Fade{
  //通过定义并操作index可以实现轮播图的切换
  get currentIndex() {
    return this._index;
  }

  set currentIndex(val) {
    this.update(() => {
      this._index = val;
    });
  }
}
```