如何在javascript中仅在onclick上播放gif

我有一个代码，它从数组字符加载gif动画，并将其加载到image src内的类板。

I want to play the gif animation仅当我单击显示的gif时.

加载gif 后立即播放gif

How to change my code to display the gif from array as it is doing now but play the gif only when i click on it?

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。你可以简单地使用你的代码。我希望这能帮助你

我使用此网站将您的gif转换为png：https://image.online-convert.com/convert-to-png

然后将onclick设置为img，将src更改为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];
}

.board {
position: absolute;
top: 4.3vh;
left: 10vw;
cursor: pointer;
}
.board img {
width: 35.3vw;
height: 45.5vh;
border-radius: 15%;
}

<body>
<div class="board">
<img src=" https://i.stack.imgur.com/pqbOp.png" id="hiddenimageid" onclick="character();"/>
</div>
</body>

相关内容

最新更新

热门标签：