javascript - jQuery:无限循环在 2 个 img src 之间交替

Question

我正在尝试用两个图像创建一个简单的 GIF 动画。我想使用相同的 img 标签并更改循环上的 2 个 src 链接。

这是我到目前为止所得到的，但我不知道如何解决它:

HTML

<img class="logo" src="https://dl.dropbox.com/s/7mbi7un8i0sksoq/flaws1.svg" draggable="false">

jQuery

$(document).ready(function() {
    $(function(){
        setInterval(function(){
            setTimeout(function(){$('.logo').attr("src", "https://dl.dropbox.com/s/z4zb1ad94w92pra/flaws2.svg");}, 200);
            setTimeout(function(){$('.logo').attr("src", "https://dl.dropbox.com/s/7mbi7un8i0sksoq/flaws1.svg");}, 200);
        }, 400);
    });
});

简化的 CSS

body {
  background: black;
}

.logo {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0; margin: auto;
    width: 70%;
}

Answer 1

我不明白为什么您需要 setInterval 和 setTimeout。这效果非常好。 https://jsbin.com/zewudijara/edit?js,console,output

$(function(){
  var $logo = $('.logo');
  var index = 0;
  var sources = [
    'https://dl.dropbox.com/s/7mbi7un8i0sksoq/flaws1.svg',
    'https://dl.dropbox.com/s/z4zb1ad94w92pra/flaws2.svg',
  ];

  setInterval(function () {
    index ^= 1;
    $logo.attr('src', sources[index]);
  }, 400);
});

根据 @Brian 的出色反馈，我更新了我的答案，使用按位运算在 1 和 0 之间切换。