javascript - child javascript jQuery的分离索引

// 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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">
  <img class="font-big-single-image" src="Ravi-04.svg">
  <img class="font-big-single-image" src="Ravi-05.svg">
  <img class="font-big-single-image" src="Ravi-06.svg">
  <img class="font-big-single-image" src="Ravi-07.svg">
  <img class="font-big-single-image" src="Ravi-08.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">
  <img class="font-big-single-image" src="Ravi-03.svg">
  <img class="font-big-single-image" src="Ravi-04.svg">
  <img class="font-big-single-image" src="Ravi-05.svg">
  <img class="font-big-single-image" src="Ravi-06.svg">
  <img class="font-big-single-image" src="Ravi-07.svg">
  <img class="font-big-single-image" src="Ravi-08.svg">
</div>

我有几个具有相同类的div，并且在它们内部有几个具有相同类且具有display的img元素：在我的CSS中没有，我想在子级（具有相同类的img元素）之间从头到尾，然后从最后到第一个和唯一一次显示一个：阻止，所以它将是某种动画。
请注意，具有相同类的div很少，并且其中的img元素也具有相同的类，我想分别遍历每个div。

最佳答案

也许最简单的方法是通过CSS动画，而不需要JS：

.font-big-single-image {
  position: absolute;
  width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-position: center center;
  animation-name: imgSwitch;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  -webkit-animation-name: imgSwitch;
  -webkit-animation-duration: 9s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
}

@-webkit-keyframes imgSwitch {
  0% { background-image: url('https://unsplash.it/400/400/?image=1075'); }
  9% { background-image: url('https://unsplash.it/400/400/?image=1075'); }
  10% { background-image: url('https://unsplash.it/400/400/?image=1076'); }
  19% { background-image: url('https://unsplash.it/400/400/?image=1076'); }
  20% { background-image: url('https://unsplash.it/400/400/?image=1077'); }
  29% { background-image: url('https://unsplash.it/400/400/?image=1077'); }
  30% { background-image: url('https://unsplash.it/400/400/?image=1078'); }
  39% { background-image: url('https://unsplash.it/400/400/?image=1078'); }
  40% { background-image: url('https://unsplash.it/400/400/?image=1079'); }
  49% { background-image: url('https://unsplash.it/400/400/?image=1079'); }
  50% { background-image: url('https://unsplash.it/400/400/?image=1080'); }
  59% { background-image: url('https://unsplash.it/400/400/?image=1080'); }
  60% { background-image: url('https://unsplash.it/400/400/?image=1081'); }
  69% { background-image: url('https://unsplash.it/400/400/?image=1081'); }
  70% { background-image: url('https://unsplash.it/400/400/?image=1082'); }
  79% { background-image: url('https://unsplash.it/400/400/?image=1082'); }
  80% { background-image: url('https://unsplash.it/400/400/?image=1083'); }
  89% { background-image: url('https://unsplash.it/400/400/?image=1083'); }
  90% { background-image: url('https://unsplash.it/400/400/?image=1084'); }
  100% { background-image: url('https://unsplash.it/400/400/?image=1084'); }
}

@keyframes imgSwitch {
  0% { background-image: url('https://unsplash.it/400/400/?image=1075'); }
  9% { background-image: url('https://unsplash.it/400/400/?image=1075'); }
  10% { background-image: url('https://unsplash.it/400/400/?image=1076'); }
  19% { background-image: url('https://unsplash.it/400/400/?image=1076'); }
  20% { background-image: url('https://unsplash.it/400/400/?image=1077'); }
  29% { background-image: url('https://unsplash.it/400/400/?image=1077'); }
  30% { background-image: url('https://unsplash.it/400/400/?image=1078'); }
  39% { background-image: url('https://unsplash.it/400/400/?image=1078'); }
  40% { background-image: url('https://unsplash.it/400/400/?image=1079'); }
  49% { background-image: url('https://unsplash.it/400/400/?image=1079'); }
  50% { background-image: url('https://unsplash.it/400/400/?image=1080'); }
  59% { background-image: url('https://unsplash.it/400/400/?image=1080'); }
  60% { background-image: url('https://unsplash.it/400/400/?image=1081'); }
  69% { background-image: url('https://unsplash.it/400/400/?image=1081'); }
  70% { background-image: url('https://unsplash.it/400/400/?image=1082'); }
  79% { background-image: url('https://unsplash.it/400/400/?image=1082'); }
  80% { background-image: url('https://unsplash.it/400/400/?image=1083'); }
  89% { background-image: url('https://unsplash.it/400/400/?image=1083'); }
  90% { background-image: url('https://unsplash.it/400/400/?image=1084'); }
  100% { background-image: url('https://unsplash.it/400/400/?image=1084'); }
}  

<div class="font-main-image">
  <div class="font-big-single-image"></div>
</div>

关于javascript - child javascript jQuery的分离索引，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45834726/