一、创建 多个 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>
三、通过 CSS Animation 实现
后续有时间更新…
