淡出淡入轮播

最新推荐文章于 2025-12-20 00:52:11 发布

原创最新推荐文章于 2025-12-20 00:52:11 发布 · 391 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html5

JS 专栏收录该内容

91 篇文章

订阅专栏

本文介绍了一个简单的轮播图实现方法，通过HTML和JavaScript实现了图片的淡入淡出效果。每5秒自动切换到下一张图片，并带有平滑过渡。

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

    ul {
      list-style: none;
      position: relative;
      width: 590px;
      margin: 50px auto;
    }

    li {
      position: absolute;
      display: none;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <ul>
    <li>
      <img src="images/1.jpg" alt="">
    </li>
    <li>
      <img src="images/2.jpg" alt="">
    </li>
    <li>
      <img src="images/3.jpg" alt="">
    </li>
    <li>
      <img src="images/4.jpg" alt="">
    </li>
  </ul>

  <script src="js/tools.js"></script>
  <script>
    // 所有待轮播切换显示的 li
    const lis = $('li', true)

    // 先默认显示出第一张图
    lis[0].style.display = 'block'

    // 当前显示图片的索引
    let currentIndex = 0
    // 下一张图片的索引
    let nextIndex = 1

    // 轮播切换
    setInterval(() => {
      // 定义变量，获取当前元素与下一个元素
      const current = lis[currentIndex], next = lis[nextIndex]
      // 当前图片淡出
      animate(current, {opacity: 0}, 3000, () => current.style.display = 'none')
      // 即将显示图片淡入
      next.style.display = 'block'
      next.style.opacity = '0'
      animate(next, {opacity:1}, 3000)
      // 修改索引
      // currentIndex = nextIndex
      nextIndex += 1
      if (nextIndex >= lis.length) {
        nextIndex = 0
      }
    }, 5000)