如何实现点击按钮轮换展示GIF动图？

嘿，这个需求其实很好解决！咱们只需要用一个数组存好你想轮换的所有GIF链接，再用一个变量记录当前显示的位置，每次点击按钮时切换到下一个链接（循环往复）就行。我基于你现有的代码改好了，直接用就行：

完整代码示例 #

<button class="yes" type="button" onclick="revealDiv()">YES!</button>
<div id="gifDIV" style="display: none;">
  <!-- 初始可留空，也可以直接设为数组第一个链接 -->
  <iframe id="gifFrame" src="" width="400" height="300" frameborder="0"></iframe>
</div>

<script>
// 第一步：把你要轮换的所有GIF链接放进这个数组里，想加多少加多少
const gifUrls = [
  "https://giph...你的第一个GIF链接",
  "https://giph...你的第二个GIF链接",
  "https://giph...你的第三个GIF链接",
  // 继续添加更多你需要的链接
];

// 记录当前显示的GIF索引，初始从0开始
let currentGifIndex = 0;

function revealDiv() {
  const gifDiv = document.getElementById("gifDIV");
  const gifFrame = document.getElementById("gifFrame");
  
  // 切换到下一个GIF，到最后一个就自动回到第一个（循环逻辑）
  currentGifIndex = (currentGifIndex + 1) % gifUrls.length;
  // 更新iframe的链接为当前选中的GIF
  gifFrame.src = gifUrls[currentGifIndex];
  
  // 确保DIV显示出来（如果你的DIV初始是隐藏状态的话）
  gifDiv.style.display = "block";
}
</script>

关键逻辑说明 #

• gifUrls数组：这是你的GIF链接仓库，把所有要轮换的链接按顺序放进去，后续想调整顺序或增减链接，直接改这个数组就行。
• currentGifIndex变量：用来追踪当前显示的是数组里第几个GIF，每次点击按钮就自动+1，用% gifUrls.length实现循环——比如数组有3个链接，索引到2之后再加1就变成0，自动回到第一个链接。
• revealDiv()函数：整合了切换链接和显示DIV的逻辑，如果你原本的DIV初始就是显示状态，只需要删掉gifDiv.style.display = "block";这一行就行。

内容的提问来源于stack exchange，提问作者xarubin