separating index of children javascript jquery

  <div class="font-main-image">
      <img class="font-big-single-image" src="Ravi-01.svg">
      <img class="font-big-single-image" src="Ravi-02.svg">
      <img class="font-big-single-image" src="Ravi-03.svg">

  </div>
  <div class="font-main-image">
    <img class="font-big-single-image" src="Ravi-01.svg">
    <img class="font-big-single-image" src="Ravi-02.svg">

   </div>

I have few divs with same classes and and inside of them few img elements with same classes with display : none at my css and I want toggle between children(img elements with same class) from first to last and then from last to first and only have one display:block at a time so it will be some kind of animation. note that there are few divs with the same class and the img elements inside of them have the same class as well and I want to loop through every div separately.