hallo-piepmatz gif-show

gif-show-smippet.html

<script>
var getAttr = function(element, attr) {
  return element.attributes[attr].value;
};

var hideAll = function(parent) {
  for (var i=0; i<parent.children.length; i++) {
    var child = parent.children[i];
    child.style.display = 'none';
  }
};
var show = function(element) {
  element.style.display = 'inherit';
};

var createGifShow = function(parent) {
  var speed = parseInt(getAttr(parent, 'data-speed'));
  if (isNaN(speed)) speed = 500;

  var children = parent.children;
  var index = 0;

  setInterval(function() {
    hideAll(parent);
    if (index >= children.length) {
      index = 0;
    }
    var child = children[index++];
    while (child.nodeName === 'BR') {
      child = children[index++];
    }
    show(child);
  }, speed);

};

var imgContainer = document.querySelectorAll(".gif-show");
for (var i=0; i<imgContainer.length; i++) {
  createGifShow(imgContainer[i]);
}
</script>