我有下面的代码，它从数组字符加载gif动画，并将其加载到图像内的类板源代码.
我想播放 gif 动画仅当我点击显示的那个 gif 时。
它现在在加载 gif 后立即播放 gif
如何更改我的代码以像现在一样显示数组中的 gif，但仅在我单击它时播放 gif？
number = 0;
var animations = ['https://image.ibb.co/epha5A/giphy.gif',
'https://image.ibb.co/epha5A/giphy.gif',
'https://image.ibb.co/epha5A/giphy.gif'
];
function character() {
image = document.getElementById('hiddenimageid');
image.src = animations[number];
console.log(number);
number++;
}.board {
position: absolute;
top: 4.3vh;
left: 10vw;
cursor: pointer;
}
.board img {
width: 35.3vw;
height: 45.5vh;
border-radius: 15%;
}<body onload="character();">
<div class="board">
<img src="" id="hiddenimageid" />
</div>
</body>最佳答案
给你:
number = 0;
var animations = ['https://image.ibb.co/epha5A/giphy.gif',
'https://image.ibb.co/epha5A/giphy.gif',
'https://image.ibb.co/epha5A/giphy.gif'
];
var refreshIntervalId = setInterval(function() {
image = document.getElementById('hiddenimageid');
image.src = animations[number];
},1)
function character() {
clearInterval(refreshIntervalId);
image = document.getElementById('hiddenimageid');
image.src = animations[number];
console.log(number);
number++;
}.board {
position: absolute;
top: 4.3vh;
left: 10vw;
cursor: pointer;
}
.board img {
width: 35.3vw;
height: 45.5vh;
border-radius: 15%;
}<body onclick="character();">
<div class="board">
<img src="" id="hiddenimageid" />
</div>
</body>使用此解决方案，您不必将图像转换为 png 或 jpeg。您可以简单地按原样使用您的代码。希望对你有帮助
关于javascript - 如何仅在 javascript 中的 onclick 上播放 gif，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53256789/