轮播图。。

结构：

img-list : 图片列表

radio-list : 圆点 列表

<div class="root">
    <ul class="img-list">
      <li class="img-item active">1</li>
      <li class="img-item">2</li>
      <li class="img-item">3</li>
    </ul>
    <ul class="radioList">
      <li class="radio-item active" data-index=1></li>
      <li class="radio-item" data-index=2></li>
      <li class="radio-item" data-index=3></li>
    </ul>
    <button>《= </button>
    <button> =》</button>
  </div>

样式：

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

    .root {
      width: 800px;
      height: 400px;
      border: 1px solid black;
      margin: 0% auto;
      position: relative; 
    }

    .img-list {
      width: 800px;
      height: 400px;
      position: absolute;
    }

    .img-item {
      width: 100%;
      height: 100%;
      list-style-type: none;
      position: absolute;
      transition: all 1s
    }

    .img-item.active {
      z-index: 50;

    }

    .img-list .img-item:nth-child(1) {
      background-color: pink;
    }

    .img-list .img-item:nth-child(2) {
      background-color: beige;
    }

    .img-list .img-item:nth-child(3) {
      background-color: navajowhite;

    }

    .radioList {
      position: absolute;
      bottom: 0;
      left: calc(50% - 100px);
      display: flex;
      justify-content: center;
      align-items: center;
      width: 200PX;
      height: 40px;
      background-color: aliceblue;
      z-index: 200;
    }

    .radio-item {
      width: 30PX;
      height: 30px;
      margin: 0px 5px;
      cursor: pointer;
      border-radius: 50%;
      background-color: pink;
      list-style-type: none;
      transition: all .8s
    }

    .radio-item.active {
      background-color: rgb(208, 84, 104);
    }

    button {
      position: absolute;
      z-index: 100;
      cursor: pointer;
    }

    .root button:first-of-type {
      left: 0%;
      top: 50%;
    }

    .root button:last-child {
      top: 50%;
      right: 0%;
    }
  </style>

<script>
  // 索引
  let index = 0
  let id = ''
  let imgList = document.getElementsByClassName('img-item')
  let radioList = document.getElementsByClassName('radio-item')
  let buttonList = document.getElementsByTagName('button')
  let root = document.getElementsByClassName('root')

  // 后退
  buttonList[0].addEventListener('click', function () {
    jianjian()
  })
  // 前进
  buttonList[1].addEventListener('click', function () {
    add()
  })
  // 移入停止滚动
  root[0].onmousemove = function () {
    clearInterval(id)
  }
  // 移除开始滚动
  root[0].onmouseleave = function () {
    play()
  }
  // 小圆点点击切换图片
  for (let i in radioList) {
    radioList[i].onclick = function () {
      index = i
      active()
    }
  }
  // 移除激活
  function deAcive () {
    for (let i of radioList) {
      i.className = 'radio-item'
    }
    for (let i of imgList) {
      i.className = 'img-item'
    }
  }
  // 添加激活
  function active () {
    deAcive()
    radioList[index].className = 'radio-item active'
    imgList[index].className = 'img-item active'
  }
  // 前进
  function add () {
    if (index >= radioList.length - 1) {
      index = 0
    }
    else { index++ }
    active()
  }
  // 后退
  function jianjian () {
    if (index <= 0) {
      index = radioList.length - 1
      console.log(index)
    }
    else { index-- }
    active()
  }
  function play () {
    id = setInterval(() => {
      add()
    }, 1500)
  }
  play()

</script>

思路： 图片列表相对定位，图片成员通过设置绝对定位堆叠在一起；通过Z-index控制最上方的图片；创建图片和小圆点的Active样式 => 当带有Acitve的图片的z-index值会比其他图片层级高，这样即可实现图片切换，小圆点的激活样式：颜色变重。

Script: 

1. 创建变量：Index接受索引，创建id接受定时器。

创建激活/失活函数用来添加 / 清空 .active Class。

        失活：遍历小圆点、图片列表，使其ClassName去除‘Active'

        激活：对指定索引的小圆点&&图片添加‘Active'

分析轮播图功能模块

1. 前进后退

        前进 ：index++后 ，调用激活函数切换图片

        后退：同上。

2.图片自动滚动 、鼠标移入停止，移出重启

        自动滚动：通过定时器设定前进频率：

        移入：删除定时器

        移除：重启定时器

3.点击小圆点切换对应图片

       由于有几张图片就有几个小圆点，故点击小圆点时 index 赋值 小圆点的索引 => 对应图片则会切换。