【JavaScript】- 使用mouseenter 用于轮播图

 可以看到这里有四个事情需要做

1.底部 缩略图

2.内容大图

3.图片描述信息

4.下一张  上一张

css：

 * {
        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;
      }

html：

  <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>

    <!-- 引入页面js-->
    <script src="./js/index 练习.js"></script>

js：

// 页面加载
window.addEventListener('load', () => {
    // 获取元素
    let slides = document.querySelectorAll('.slides li')        // 大图
    let indicators = document.querySelectorAll('.indicator li') // 缩略图
    let extra = document.querySelector('.extra h3')        // 缩略图描述信息
    let prev = document.querySelector('.extra .prev')   // 上一张按钮
    let next = document.querySelector('.extra .next')   // 下一张按钮
    let imgIndex = 0
    let timerId             // 自动轮播
    let main = document.querySelector('.main')      // 获取整个内容

    function getSwitch(ele, index) {     // 鼠标滑动缩略图进行图片切换 -- 封装一个函数
        // 缩略图切换样式 -- 排他思想
        document.querySelector('.indicator li.active').classList.remove('active')
        indicators[index].classList.add('active')

        // 大图切换样式 -- 排他思想
        document.querySelector('.slides li.active').classList.remove('active')
        slides[index].classList.add('active')

        // 缩略图更改描述信息
        extra.innerHTML = `第${index + 1}张图的描述信息`

        // 让变化量（索引号） 重新赋值为 当前鼠标经过的索引号
        imgIndex = index
    }
    // 1.鼠标滑动缩略图进行图片切换
    indicators.forEach((ele, index) => {
        ele.addEventListener('mouseenter', function () { getSwitch(ele, index) })
    })


    // 2.下一张按钮
    next.addEventListener('click', () => {
        imgIndex < indicators.length - 1 ? imgIndex++ : imgIndex = 0
        getSwitch(indicators, imgIndex)
    })


    // 3.上一张按钮
    prev.addEventListener('click', () => {
        imgIndex > 0 ? imgIndex-- : imgIndex = indicators.length - 1
        getSwitch(indicators, imgIndex)
    })

    // 4.自动轮播
    function getPlay() {
        timerId = setInterval(function () {
            next.click()
        }, 1000)
    }
    getPlay()

    main.addEventListener('mouseenter', () => {
        clearInterval(timerId)
    })
    main.addEventListener('mouseleave', () => {
        getPlay()
    })

})