前端使用多张图片生成 Gif 效果（支持循环、不循环、完成回调）
时间：12-21来源：作者：点击数：
一、创建多个 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>
方便获取更多学习、工作、生活信息请关注本站微信公众号
推荐内容
相关内容
栏目更新
栏目热门
湘公网安备 43102202000103号