Separating index of children in JavaScript jQuery
03:27 23 Aug 2017 

// JavaScript Document
$(document).ready(function() {
    var num = $(".font-main-image").children("img").length;
    $("body .font-main-image").children("img").eq(0).show();
    var j = num;
    var i = 0;

    function main() {
        function toggle() {
            $("body .font-main-image").children("img").eq(i - 1).hide();
            $("body .font-main-image").children("img").eq(i).show();
            i = i + 1;
            if (i === num) {
                clearInterval(int);
                int1 = setInterval(toggleback, 90);
            }
        }
        var int = setInterval(toggle, 90);

        function toggleback() {
            $("body .font-main-image").children("img").eq(j - 1).hide();
            $("body .font-main-image").children("img").eq(j - 2).show();
            j = j - 1;
            if (j === 1) {
                clearInterval(int1);
                j = num;
                i = 0;
            }
        }
    }
    setInterval(main, 90 * 2 * num);
});
img {
  display: none;
  position: absolute;
  width: 400px;
}

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.

javascript html jquery css