JS——【案例】图片轮播图(自动轮播/手动点击/悬停显示)[技术栈:html、css、JavaScript]

news2025/1/12 18:52:13

1、效果：

在这里插入图片描述

2、需求：

在这里插入图片描述

3、代码实现：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片轮播图(自动/手动)</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 .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>

</body>
<script>

  let lis = document.querySelectorAll('.indicator li') //获取元素(小图片小li)
  let piclis = document.querySelectorAll('.slides ul li') //大图片中小li
  let text = document.querySelector('.extra h3') //获取当前图片描述信息元素
  let next = document.querySelector('.next') //获取点击按钮所在位置元素
  let prev = document.querySelector('.prev') //获取点击按钮所在位置元素
  let main= document.querySelector('.main') //获取大盒子元素
  //需求1：
  //鼠标经过图片，当前图片高亮，其余图片变暗;——>移除、添加类
  for (let i = 0; i < lis.length; i++) {  
    lis[i].addEventListener('mouseenter',function(){ //给元素绑定事件
      document.querySelector('.indicator .active').classList.remove('active') //选出高亮的图片移除类
      this.classList.add('active')  //再为当前图片添加类

  //需求2：
  //大图片跟随小图片变化(若想要过渡的效果，可使用opacity(不透明度)效果，css淡入淡出效果，也是添加移除类实现)
  //大图片显示隐藏，实则也是((大图片盒子中小li的))添加移除类
  document.querySelector('.slides ul .active').classList.remove('active') //选出唯一active,删除类
  piclis[i].classList.add('active') //对应序号的li添加active类
  //图片描述信息跟随改变
  text.innerHTML = `第${i + 1}张图的描述信息`

  //鼠标经过哪个小li 他的索引号就是i
  index = i 

    })

  }

  //需求3：点击按钮播放效果(右侧按钮):（与鼠标经过无关，应放在for外面;
  //但上下一张图片会受鼠标经过的图片影响，故又放在鼠标经过事件后面）
  let index = 0 //定义记录图片索引的全局变量
  next.addEventListener('click',function(){
    index++
    //每次点击大、小图片都要随之变化
    //小图片
    if(index > 9){
      index = 0
    }   //可写成index % lis.length
    common()//调用显示大小图片函数

  })

    //需求4：点击按钮播放效果(左侧按钮)
    //同理左侧按钮只需吧右侧按钮改成减- 即可 
    prev.addEventListener('click',function(){
    index--
    //每次点击大、小图片都要随之变化
    //小图片
    if(index < 0){
      index = lis.length - 1
    }  
    common()//调用显示大小图片函数

  })

  //需求5:
  //把左右侧按钮大量相同的操作代码封装成函数调用即可
  function common(){  //显示大小图片函数
    document.querySelector('.indicator .active').classList.remove('active') //选出高亮的图片移除类
    lis[index].classList.add('active') //添加类
    //大图片
    document.querySelector('.slides ul .active').classList.remove('active') //选出唯一active,删除类
    piclis[index].classList.add('active') //对应序号的li添加active类
    //图片描述信息跟随改变
    text.innerHTML = `第${index + 1}张图的描述信息`
  }

  //需求6：
  // 定时器，自动播放；其实相当于点击了右侧按钮，此时调用right.click()
  let timer = setInterval(function(){
    //自动调用右侧按钮的点击事件
    next.click()
  },1000)

  //需求7：
  // 鼠标经过定时器停止(此处设置经过大盒子都停止)
  main.addEventListener('mouseenter',function(){
    clearInterval(timer)
  })
  //  鼠标离开时定时器开始
  main.addEventListener('mouseleave',function(){
    timer = setInterval(function(){ //此处不能重新let定义,函数内定义为局部变量定时器停止找不到此定时器
    //自动调用右侧按钮的点击事件
    next.click()
  },1000)
  })
  
</script>

</html>