面向对象的轮播图（渐隐渐现）

思路：

        + 下一张: 当前这一张消失, 下一张显示

        + 上一张: 当前这一张消失, 上一张显示

        + 某一张: 当前这一张消失, 某一张显示

        + 三个效果变成一个

          => 当前这一张消失, 某一张显示

          => 有的时候, 某一张是 +1

          => 有的时候, 某一张是 -1

          => 有的时候, 某一张是 =x

        + 直接书写一个 切换一张的 函数

          => 上一张 还是 下一张 还是 某一张

          => 看参数

1，css样式代码：

<style>
    * {
      margin: 0;
      padding: 0;
    }

    ul, ol, li {
      list-style: none;
    }

    .banner {
      width: 500px;
      height: 350px;
      border: 3px solid skyblue;
      border-radius: 15px;
      overflow: hidden;
      margin: 50px auto;
      position: relative;
    }

    .banner > ul {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .banner > ul > li {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 100px;
      color: #fff;
      opacity: 0;
      transition: opacity .5s linear;
      position: absolute;
      left: 0;
      top: 0;
    }

    .banner > ul > li.active {
      opacity: 1;
    }

    .banner > ol {
      width: 200px;
      height: 30px;
      background-color: rgba(0, 0, 0, .5);
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 30px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      border-radius: 15px;
    }

    .banner > ol > li {
      width: 20px;
      height: 20px;
      background-color: #fff;
      border-radius: 50%;
      cursor: pointer;
    }

    .banner > ol > li.active {
      background-color: black;
    }

    .banner > div {
      width: 30px;
      height: 50px;
      background-color: rgba(0, 0, 0, .5);
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      cursor: pointer;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

    .banner > div.right {
      right: 0;
    }
  </style>

2，html代码

<div class="banner" id="banner1">
    <ul>
      <li class="active" style="background-color: red;">1</li>
      <li style="background-color: pink;">2</li>
      <li style="background-color: orange;">3</li>
      <li style="background-color: purple;">4</li>
      <li style="background-color: yellow;">5</li>
    </ul>
    <ol>

    </ol>
    <div class="left">&lt;</div>
    <div class="right">&gt;</div>
  </div>

3，JS部分的代码

function Banner(selector) {
      // 范围元素
      this.ele = document.querySelector(selector)
      // 承载图片的盒子
      this.imgBox = this.ele.querySelector('ul')
      // 承载焦点的盒子
      this.pointBox = this.ele.querySelector('ol')
      // 准备一个变量, 表示当前这一张的索引
      this.index = 0
      // 准备一个变量, 接受定时器返回值
      this.timer = 0

      // 初始化函数执行
      this.init()
    }

    // 第一个方法应该是 初始化(遥控器)
    Banner.prototype.init = function () {
      // 调用设置焦点的函数
      this.setPoint()
      // 调用自动轮播的函数
      this.autoPlay()
      // 调用绑定事件的函数
      this.overOut()
      this.bindEvent()
    }

    // 设置焦点
    Banner.prototype.setPoint = function () {
      // 拿到需要设置多少个焦点
      const pointNum = this.imgBox.children.length

      // 创建生成 li
      const frg = document.createDocumentFragment()
      for (let i = 0; i < pointNum; i++) {
        const li = document.createElement('li')
        if (i === 0) li.classList.add('active')
        li.classList.add('item')
        li.dataset.pointIndex = i
        frg.appendChild(li)
      }
      this.pointBox.appendChild(frg)

      // 重新调整宽度
      this.pointBox.style.width = pointNum * (20 + 10) + 'px'
    }

    // 切换一张
    // type 如果是 true, ++
    // type 如果是 false, --
    // type 如果是 数字, 直接赋值
    Banner.prototype.changeOne = function (type) {
      // 1. 当前这一张消失
      this.imgBox.children[this.index].classList.remove('active')
      // 焦点和图片的操作逻辑以及索引都一样
      this.pointBox.children[this.index].classList.remove('active')

      // 2. 根据参数调整 this.index 的值
      if (type === true) {
        this.index++
      } else if (type === false) {
        this.index--
      } else {
        this.index = type
      }

      // 2-2. 判断 this.index 的边界值
      if (this.index >= this.imgBox.children.length) this.index = 0
      if (this.index < 0) this.index = this.imgBox.children.length - 1

      // 3. 让当前这一张显示
      // 因为在 步骤1 和 步骤3 中间, 让 index 变化了
      // 所以两次说的 当前 不是同一张
      this.imgBox.children[this.index].classList.add('active')
      this.pointBox.children[this.index].classList.add('active')
    }

    // 自动轮播
    // 每间隔一段时间, 切换下一张
    Banner.prototype.autoPlay = function () {
      this.timer = setInterval(() => {
        // 切换下一张
        this.changeOne(true)
      }, 2000)
    }

    // 移入移出
    Banner.prototype.overOut = function () {
      this.ele.addEventListener('mouseover', () => clearInterval(this.timer))
      this.ele.addEventListener('mouseout', () => this.autoPlay())
    }

    // 点击事件
    Banner.prototype.bindEvent = function () {
      this.ele.addEventListener('click', e => {

        if (e.target.className === 'left') this.changeOne(false)
        if (e.target.className === 'right') this.changeOne(true)
        if (e.target.className === 'item') this.changeOne(e.target.dataset.pointIndex - 0)

      })
    }

    // 将来使用的时候
    const b = new Banner('#banner1', { effect: 'fade' })
    console.log(b)