使用 jQuery 进行图像交换

Question

我希望有人能帮助我解决这个问题。 我正在开发一个投资组合网站，目前如下所示：

http://cargocollective.com/shap

如您所见，我有超过 15 个动画 gif 缩略图的 png 图像。

基本上，我想让一些简短的 gif 动画时不时地弹出到一些屏幕上，所以我想做的是有一个脚本，可以随机地或在一定的时间。

我希望有人能理解我的意思并帮助我。

______________________ 更新：

非常感谢，我非常感谢您的帮助。很抱歉我缺乏知识，这使我很难使用你刚刚写的内容，但这是我添加到源代码中的内容：

$(document).ready(function() {
  changer();
});

function changer() {
  var imgnum = Math.floor(15 * Math.random());
  var time = Math.floor(5000 * Math.random());
  var $img = $("img").eq(imgnum);

  if ($img.attr("src") == "http://payload.cargocollective.com/1/1/39798/479556/prt_166x132_1314132436.gif")
    $img.attr("src", "http://payload.cargocollective.com/1/1/39798/479849/prt_166x132_1314132538.gif");
  else
    $img.attr("src", "http://payload.cargocollective.com/1/1/39798/479556/prt_166x132_1314132436.gif");
  setTimeout(changer, time);
}

/* have any CSS? put it here! */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>woops need some HTML here</div>

我刚刚复制了 2 个 gif 缩略图的 URL 并将它们添加到脚本中，这绝对是错误的吗？ 也许我使用的是 Cargocollective 系统，这让事情变得复杂。 这是现在的样子，正如你所看到的，有些事情正在发生，但我无法真正控制它：

http://cargocollective.com/shap

（一分钟后，png 覆盖层由于某种原因消失了）

最好的，

Answer 1

显像管电视！多么奇妙的古雅啊。 ;-)

嗯，这是我扔在一起的东西。显然，您应该将实际图像 SRC 更改为服务器上存在的内容。

http://jsfiddle.net/9KrsV/1/

$(function() { changer(); });

function changer() {
  var imgnum = Math.floor(15*Math.random());
  var time = Math.floor(5000*Math.random());
  var $img = $("img").eq(imgnum);

  if ($img.attr("src")=="images/chalk-dotted.png")
    $img.attr("src","images/chalk-box.png");
  else
    $img.attr("src","images/chalk-dotted.png");
  setTimeout(changer,time);
}

更新：显然，这是相当狭窄的。这是另一个脚本，它将存储旧的 SRC 并最终翻转回它：

function changer() {
    var imgnum = Math.floor(15 * Math.random());
    var time = Math.floor(5000 * Math.random());
    var $img = $("img").eq(imgnum);
    var newsrc = "noisy_static.gif";

    if ($img.attr("src") == newsrc) {
        $img.attr("src", $img.data("oldsrc"));
    } else {
        $img.data("oldsrc",$img.attr("src"));
        $img.attr("src", newsrc);
    }
    setTimeout(changer, time);
}