JavaScript image animations

image-animations-jquery.js

$.each([
  { images: ['foo.jpg', 'foo2.jpg'], interval: 200 },
  { images: ['bar.jpg', 'bar2.jpg'], interval: 300 }
], function(index, animation) {
  $('<img/>')
      .attr('src', animation.images[0])
      .load(function () {
        var $img = $(this), count = 0;
        $img.unbind();

        setInterval(function() {
          $img.attr('src', animation.images[count % animation.images.length]);
          count++;
        }, animation.interval);
      })
      .appendTo('body');
});

image-animations.js

[
  { images: ['foo.jpg', 'foo2.jpg'], interval: 200 },
  { images: ['bar.jpg', 'bar2.jpg'], interval: 300 }
].forEach(function(animation) {
  var img = document.createElement("img");
  img.src = animation.images[0];
  img.onload = function() {
    img.onload = null;
    var count = 0;

    setInterval(function() {
      img.src = animation.images[count % animation.images.length];
      count++;
    }, animation.interval);
  };

  document.body.appendChild(img);
});

Attempt at implementing basic image animation in JavaScript with and without using jQuery. If there are better ways to do any of this, please let me know.