如何让我的按钮调用 GIF 的轮换？

Question

我在自己创建的一个小页面上有一个按钮，它显示了一个 DIV，其中有一个 gif。有人建议它应该在每次单击按钮时调用一个新的 gif。我四处寻找如何做到这一点，但未能找到解决方案。每次再次单击该按钮时，我怎样才能使它通过选择的 gif URL 旋转？

这是我目前拥有的一个 gif 代码：

HTML

<button class="yes" type="button" onclick="revealDiv()">YES!</button> <div id="gifDIV"> <iframe src="https://giphy.com/embed/OSWRJKmwUEOD6" width="480" height="270" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/excited-dance-party-OSWRJKmwUEOD6"></a></p> </div>

JAVASCRIPT

<script>
function revealDiv() {
document.getElementById('gifDIV').style.display = "block";
}

关于执行此操作的最佳方法有什么想法吗？我对此很陌生，这是我第一次使用 JS，所以请记住这一点。谢谢！

Answer 1

首先你应该创建一个链接数组。

var ArrayGIF = ['https://media3.giphy.com/media/WNcbaCHN0mxsdJ2YXm/giphy.gif', 'https://media2.giphy.com/media/l3diOZVkXQ04BONB6/giphy.gif', 'https://media1.giphy.com/media/3o7bu0fTb50rSXgWsw/giphy.gif', 'https://media0.giphy.com/media/XKJ52vGno1REavaO5j/giphy.gif'];

每次单击按钮时，您都会生成一个随机数，该数介于零和数组长度之间。

var randomNumber = Math.floor(Math.random() * ArrayGIF.length);

最后你设置了 img src:

document.getElementById('gif').src = ArrayGIF[randomNumber];

这是最终结果： https://jsfiddle.net/kq0o2Lyc/12/

我稍微更改了您的代码，它不再使用 iframe 来显示 gif。

Answer 2

您可以存储一组 GIF 网址，然后每次循环访问它们。您可以通过更改 iframe.

的 src 来做到这一点

https://jsfiddle.net/iONinja/p1w406yn/7/

<script>
var gifs = ["https://giphy.com/embed/8vQSQ3cNXuDGo", "https://giphy.com/embed/JIX9t2j0ZTN9S", "https://giphy.com/embed/vFKqnCdLPNOKc"];
var n = 0;

function revealDiv() {
    document.getElementById("gifDIV").style.display = "block";
    document.getElementById("gifIFRAME").src = gifs[n];
    n++;
    if (n >= gifs.length) {
        n = 0;
    }
}
</script>

<button class="yes" type="button" onclick="revealDiv()">YES!</button>
<div id="gifDIV"><iframe id="gifIFRAME" src="" width="480" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div>

如何让我的按钮调用 GIF 的轮换？

How can I make my button call a rotation of GIFs?

javascript

html

button

animated-gif