Play image sequence

readme.txt

//HTML
/*=====================
<div class="root">
<div class="imageplayer">
  </div>
</div>
=======================*/


//******************************************************************//
//Usage ************************************************************
//******************************************************************//
$(document).ready(function() {
  "use strict";
   mgSeq_LoadImg("http://www.abc.com/xx_"); //Image sequence naming: xx_1, xx_2, xx_3 etc
   imgSeq("root"); // run this function to play forward
   // imgSeqReverse("root"); // run this function to play backward
});

script.js

// Loading sequence of image
function imgSeq_LoadImg(imageUrl) {
  var i, x;
  for (i = 0; i <25; i++) {
      x = imageUrl+i+".png"
      $(".imageplayer").append('<img src=" '+x+' " />');
  }
  $(".imageplayer > :not(img:nth-child(1))").hide();
}

// function for play forward
function imgSeq(x) {
  var time = 0;
  $(" ."+x+" .imageplayer img").each(function(index, element) {
    if (index == 0){

    }else{
      setTimeout(function() {
       $(" ."+x+" .imageplayer img:nth-child(" + index + ")").show();
       $(" ."+x+" .imageplayer :not(img:nth-child(" + index + "))").hide();
     }, time);
     time += 50; //change this if more delay needed
    }
  });
}

// function for play backward
function imgSeqReverse(x) {
  var time = 0;
  $(" ."+x+" .imageplayer img").each(function(index, element) {
    var $thisElm = $(" ."+x+" .imageplayer img");
    if (index == 0){

    }else{
      setTimeout(function() {
        var newIndex = $thisElm.length - index;
       $(" ."+x+" .imageplayer img:nth-child(" + newIndex + ")").show();
       $(" ."+x+" .imageplayer :not(img:nth-child(" + newIndex + "))").hide();
     }, time);
     time += 50; //change this if more delay needed
    }

  });
}