// 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，并且在其中有几个img元素具有相同的类，我的css中有display：none，我想要从第一个到最后一个然后从最后一个到子节点（具有相同类的img元素）之间切换首先，只有一个显示：一次阻止所以它将是某种动画。 请注意，有几个div具有相同的类，并且其中的img元素也具有相同的类，我想分别遍历每个div。
答案 0 :(得分：0)
也许最简单的方法是通过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>