Question

＆＃13;

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

＆＃13;

img {
  display: none;
  position: absolute;
  width: 400px;
}

＆＃13;

<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>

＆＃13;

我有几个具有相同类的div，并且在其中有几个img元素具有相同的类，我的css中有display：none，我想要从第一个到最后一个然后从最后一个到子节点（具有相同类的img元素）之间切换首先，只有一个显示：一次阻止所以它将是某种动画。请注意，有几个div具有相同的类，并且其中的img元素也具有相同的类，我想分别遍历每个div。

Answer 1

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

＆＃13;

.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'); }
}

＆＃13;

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

＆＃13;

分离孩子的索引javascript jquery

1 个答案: