轮播图制作轮播图制作,通过定时器，按一定时间进行对图片display属性进行更改。实现的效果是：1>图片自动轮播 2>图


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>QQ音乐轮播图</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      li {
        list-style: none;
      }

      .main {
        width: 700px;
        margin: auto;
        background: #000;
      }

      .slides {
        height: 320px;
        position: relative;
      }

      .slides ul li {
        /* display: none; */
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        /* 这里实现淡入淡出的关键 */
        transition: all 0.3s;
      }

      .slides li.active {
        /* display: block; */
        opacity: 1;
      }

      .slides .extra {
        width: 700px;
        height: 53px;
        line-height: 53px;
        position: absolute;
        bottom: 0px;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 10;
      }

      .slides .extra h3 {
        width: 82%;
        margin: 0;
        margin-right: 20px;
        padding-left: 20px;
        color: #98e404;
        font-size: 28px;
        float: left;
        font-weight: 500;
        font-family: "Microsoft Yahei", Tahoma, Geneva;
      }

      .slides .extra a {
        width: 30px;
        height: 29px;
        display: block;
        float: left;
        margin-top: 12px;
        margin-right: 3px;
        background-image: url(./assets/icon_focus_switch.png);
      }

      .slides .extra .prev {
        background-position: 0 0;
      }

      .slides .extra .prev:hover {
        background-position: -30px 0;
      }

      .slides .extra .next {
        background-position: -60px 0;
      }

      .slides .extra .next:hover {
        background-position: -90px 0;
      }

      .indicator {
        padding: 10px 0;
      }

      .indicator ul {
        list-style-type: none;
        margin: 0 0 0 4px;
        padding: 0;
        overflow: hidden;
      }

      .indicator ul li {
        position: relative;
        float: left;
        width: 60px;
        margin: 0 4px 0 5px;
        text-align: center;

        cursor: pointer;
      }

      .indicator li img {
        display: block;
        border: 0;
        text-align: center;
        width: 60px;
      }

      .indicator li .mask {
        width: 60px;
        height: 60px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.4);
      }

      .indicator li .border {
        display: none;
        width: 54px;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 20;
        border: 3px solid #98e404;
      }

      /* li里面的mask 和 border 刚开始都是显示的 */
      /* 我们写一个样式css */
      .indicator .active .mask {
        display: none;
      }

      .indicator .active .border {
        display: block;
      }
    </style>
  </head>

  <body>
    <div class="main">
      <div class="slides">
        <ul>
          <li class="active">
            <a href="#"
              ><img src="./assets/b_01.jpg" alt="第1张图的描述信息"
            /></a>
          </li>
          <li>
            <a href="#"
              ><img src="./assets/b_02.jpg" alt="第2张图的描述信息"
            /></a>
          </li>
          <li>
            <a href="#"
              ><img src="./assets/b_03.jpg" alt="第3张图的描述信息"
            /></a>
          </li>
          <li>
            <a href="#"
              ><img src="./assets/b_04.jpg" alt="第4张图的描述信息"
            /></a>
          </li>
          <li>
            <a href="#"
              ><img src="./assets/b_05.jpg" alt="第5张图的描述信息"
            /></a>
          </li>
          <li>
            <a href="#"
              ><img src="./assets/b_06.jpg" alt="第6张图的描述信息"
            /></a>
          </li>
          <li>
            <a href="#"
              ><img src="./assets/b_07.jpg" alt="第7张图的描述信息"
            /></a>
          </li>
          <li>
            <a href="#"
              ><img src="./assets/b_08.jpg" alt="第8张图的描述信息"
            /></a>
          </li>
          <li>
            <a href="#"
              ><img src="./assets/b_09.jpg" alt="第9张图的描述信息"
            /></a>
          </li>
          <li>
            <a href="#"
              ><img src="./assets/b_10.jpg" alt="第9张图的描述信息"
            /></a>
          </li>
        </ul>

        <div class="extra">
          <h3>第1张图的描述信息</h3>
          <a class="prev" href="javascript:;"></a>
          <a class="next" href="javascript:;"></a>
        </div>
      </div>
      <div class="indicator">
        <ul>
          <li class="active">
            <img src="assets/s_01.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
          <li>
            <img src="assets/s_02.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
          <li>
            <img src="assets/s_03.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
          <li>
            <img src="assets/s_04.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
          <li>
            <img src="assets/s_05.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
          <li>
            <img src="assets/s_06.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
          <li>
            <img src="assets/s_07.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
          <li>
            <img src="assets/s_08.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
          <li>
            <img src="assets/s_09.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
          <li>
            <img src="assets/s_10.jpg" />
            <span class="mask"></span>
            <span class="border"></span>
          </li>
        </ul>
      </div>
    </div>
    <script>
      /* 自动轮播思路
      1.页面一进来： 开启2秒定时器， 自动执行下一页事件处理函数
      2.鼠标移入大盒子main ： 清除定时器
      3.鼠标移出大盒子main :  开启2秒定时器， 自动执行下一页事件处理函数
      */

      //1.页面一进来： 开启2秒定时器， 自动执行下一页事件处理函数
      let timeID = setInterval(function() {
        next.onclick()
      }, 2000)

      //2.鼠标移入大盒子main
      document.querySelector(".main").onmouseenter = function() {
        clearInterval(timeID)
      }

      //3.鼠标移出大盒子main :  开启2秒定时器， 自动执行下一页事件处理函数
      document.querySelector(".main").onmouseleave = function() {
          /* 这里timeID前面不能写let
          不写let :  修改的是全局变量timeID
          写了let : 将会声明一个局部变量， 覆盖外面的全局timeID (这个局部变量在函数外面不能访问)
          */
        timeID = setInterval(function() {
          next.onclick()
        }, 2000)
      }

      let prev = document.querySelector(".prev")
      let next = document.querySelector(".next")
      let slidesList = document.querySelectorAll(".slides li") //大图
      let indicatorList = document.querySelectorAll(".indicator li") //小图

      let index = 0

      //下一页
      next.onclick = function() {
        //(1)下标自增
        index == slidesList.length - 1 ? (index = 0) : index++
        paita(index)
      }

      //上一页
      prev.onclick = function() {
        //(1)下标自减
        index == 0 ? (index = slidesList.length - 1) : index--
        paita(index)
      }

      /* 2.鼠标移入小图片 */
      for (let i = 0; i < indicatorList.length; i++) {
        indicatorList[i].onmouseenter = function() {
          paita(i)
          /* 让全局变量index与当前移入的i保持一致。 下一次点击下一页，才会从i的位置自增 */
          index = i
        }
      }

      function paita(i) {
        //(1)大图排他
        document.querySelector(".slides .active").classList.remove("active") //干掉兄弟
        slidesList[i].classList.add("active") //复活index的大图
        //(2)小图排他
        document.querySelector(".indicator .active").classList.remove("active")
        indicatorList[i].classList.add("active")
        //(3)修改文字
        document.querySelector(".extra>h3").innerText = `第${i +
          1}张图的描述信息`
      }
    </script>
  </body>
</html>