js定时轮播图切换逻辑

最新推荐文章于 2023-09-21 22:55:09 发布

拂晓等明月

最新推荐文章于 2023-09-21 22:55:09 发布

阅读量139

点赞数

分类专栏： javascript练习文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/qq_61320547/article/details/132030768

版权

javascript练习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

练习代码，有误差

每隔1秒切换一次图片

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./css/indrt.css" />
</head>
<body>
  <!-- 创建一个图片轮播器的容器 -->
  <div class="slider">
    <!-- 包含图片和指示器的轮播器内容 -->
    <div class="slider-wrapper">
      <img src="./image/1.jpg" alt="" /> <!-- 初始显示的图片 -->
    </div>
    <div class="slider-footer">
      <!-- 图片标题和指示器 -->
      <div>
        <p>牛啊牛啊</p> <!-- 图片的标题 -->
        <ul class="slider-indicator">
          <!-- 指示器：用于指示当前显示的图片 -->
          <li class="active"></li> <!-- 当前显示图片的指示器 -->
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <!-- 左右切换按钮 -->
      <div class="toggle">
        <button class="prev">&lt;</button> <!-- 向前切换按钮 -->
        <button class="next">&gt;</button> <!-- 向后切换按钮 -->
      </div>
    </div>
  </div>
  <!-- / -->
  <!--  -->
  <!--  -->
  <!--  -->
  <!-- 使用 JavaScript 进行图片轮播的实现 -->
  <script>
    // 1.定义图片数据，包含图片的路径、标题和背景颜色
    const img = [
      {
        url: './image/1.jpg',
        title: '长风破浪会有时',
        color: '#15384f',
      },
      {
        url: './image/2.jpg',
        title: '直挂云帆济沧海',
        color: '#e6bd87',
      },
      {
        url: './image/3.jpg',
        title: '最是人间留不住',
        color: '#5866c5',
      },
      {
        url: './image/4.jpg',
        title: '朱颜辞镜花辞树',
        color: '#07190f',
      },
      {
        url: './image/5.jpg',
        title: '牛啊牛啊',
        color: '#2b5565',
      },
    ]
    // 2.获取操作元素的位置
    let imgs = document.querySelector('.slider-wrapper img') // 图片元素
    let lis = document.querySelectorAll('.slider-indicator li') // 所有指示器元素
    let bgC = document.querySelector('.slider-footer') // 底部轮播器的背景元素
    let p = document.querySelector('.slider-footer p') // 显示图片标题的段落元素
    // 3.计数器
    let i = 0 // 图片索引计数器
    setInterval(function () {
      i++ // 自增图片索引
      if (i >= img.length) {
        i = 0 // 如果图片索引超出范围，重置为0，形成循环播放效果
      }
      // 4.渲染：根据当前索引i显示对应的图片、指示器状态、标题和底部轮播器的背景颜色
      imgs.src = img[i].url // 设置图片元素的src属性，显示对应的图片
      for (let j = 0; j < lis.length; j++) {
        lis[j].classList.remove('active') // 移除所有指示器的"active"类名，使其不显示为当前激活状态
      }
      lis[i].classList.add('active') // 添加当前激活图片对应的指示器的"active"类名，使其显示为激活状态
      bgC.style.backgroundColor = img[i].color // 设置底部轮播器的背景颜色为当前激活图片的背景颜色
      p.innerHTML = img[i].title // 更新底部轮播器中显示的图片标题
    }, 1000) // 每隔1秒切换一次图片
  </script>
</body>
</html>