要实现网页上的 GIF 图片默认不播放,而在鼠标点击后播放一次后停止,您可以使用 JavaScript 来控制 GIF 图片的播放。以下是一个示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击播放 GIF 图片</title>
<style>
#gifContainer {
width: 300px;
height: 300px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="gifContainer" onclick="playOnce()">
<img id="gifImage" src="your_gif_image.gif" alt="GIF Image">
</div>
<script>
function playOnce() {
var gif = document.getElementById("gifImage");
var src = gif.src;
// 设置 GIF 图片的 src 属性为空字符串,然后再设置回原来的 src
// 这将导致 GIF 图片重新加载并播放一次
gif.src = "";
gif.src = src;
// 移除点击事件,防止重复点击播放
document.getElementById("gifContainer").onclick = null;
}
</script>
</body>
</html>