淡出淡入轮播

最新推荐文章于 2024-08-29 14:26:44 发布

黄酱！

最新推荐文章于 2024-08-29 14:26:44 发布

阅读量348

点赞数

分类专栏： JS 文章标签：前端 javascript html5

本文链接：https://blog.csdn.net/tianranran/article/details/122527088

版权

JS 专栏收录该内容

91 篇文章 2 订阅

订阅专栏

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

黄酱！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
淡出淡入轮播

<style> * { margin: 0; padding: 0; } ul { list-style: none; position: relative; width: 590px; margin: 50px auto; } li { position: absolute; display: none; top: 0; left:
复制链接

扫一扫

专栏目录