您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

前端使用多张图片生成 Gif 效果（支持循环、不循环、完成回调）

时间：12-21来源：作者：点击数：26

一、创建`多个 img 标签`实现`Gif`效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 初始化样式 */
    #gif-container {
      width: 100%;
    }
    .gif-img {
      width: 100%;
      object-fit: contain;
    }
  </style>
</head>
<body>
  <div id="gif-container"></div>
  <script>
    // 获得容器
    const div = document.getElementById('gif-container')
    // 创建图片标签
    for (let index = 58; index <= 84; index++) {
      // 创建图片
      const img = document.createElement('img')
      // 设置 class
      img.className = 'gif-img'
      // 设置图片
      img.src = `./images/fireworks_000${index}.png`
      // 设置隐藏
      img.style = 'display: none;'
      // 添加
      div.appendChild(img)
    }
    // 获取 imgs
    const imgs = div.children
    // 总数量
    let count = imgs.length
    // 开始索引
    let index = 0
    // 定时器
    let timer = undefined
    // 切换图片间隔时间(毫秒)
    let interval = 100
    // 是否循环
    let loop = true
    // 上一张图片
    let lastImg = undefined

    // 开始轮播
    function run () {
      // 清空定时器
      clearTimer()
      // 初始化图片
      change()
      // 开始倒计时
      timer = setInterval(() => {
        // 叠加
        index += 1
        // 超过最后一张了则重新开始
        if (index > count) {
          // 回到第一张
          index = 0
          // 如果不循环则暂停（如果需要播放完成回调，在这里面添加即可）
          if (!loop) { clearTimer() }
        }
        // 切换图片
        change()
      }, interval)
    }

    // 切换图片
    function change () {
      // 有图片进行隐藏
      if (lastImg) {
        // 隐藏
        lastImg.style = 'display: none;'
        // 清空
        lastImg = undefined
      }
      // 获取图片
      lastImg = imgs[index]
      // 进行展示
      if (lastImg) {
        // 显示
        lastImg.style = 'display: block;'
      }
    }

    // 清空定时器
    function clearTimer () {
      if (timer) {
        clearInterval(timer)
        timer = undefined
      }
    }

    // 开始
    run()
  </script>
</body>
</html>

二、通过`1个 img 标签`实现`Gif`效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 初始化样式 */
    #gif-container {
      width: 100%;
      object-fit: contain;
    }
  </style>
</head>
<body>
  <img id="gif-container">
  <script>
    // 获得容器
    const img = document.getElementById('gif-container')
  
    // 图片开始索引（图片命名规则数字）
    let start = 58
    // 图片结束索引（图片命名规则数字）
    let end = 84
    // 开始索引
    let index = start
    // 定时器
    let timer = undefined
    // 切换图片间隔时间(毫秒)
    let interval = 100
    // 是否循环
    let loop = true

    // 开始轮播
    function run () {
      // 清空定时器
      clearTimer()
      // 初始化图片
      change()
      // 开始倒计时
      timer = setInterval(() => {
        // 叠加
        index += 1
        // 超过最后一张了则重新开始
        if (index > end) {
          // 回到第一张
          index = start
          // 如果不循环则暂停（如果需要播放完成回调，在这里面添加即可）
          if (!loop) { clearTimer() }
        }
        // 切换图片
        change()
      }, interval)
    }

    // 切换图片
    function change () {
      // 设置图片
      img.src = `./images/fireworks_000${index}.png`
    }

    // 清空定时器
    function clearTimer () {
      if (timer) {
        clearInterval(timer)
        timer = undefined
      }
    }

    // 开始
    run()
  </script>
</body>
</html>