滑块中的图像以奇数顺序出现

Question

有人可以向我解释为什么当下一个图像长度为0时显示1和3个图像。当第3个图像出现时它的长度为0因此根据条件存储其中的第一个图像但我​​无法理解发生了什么

＆＃13;

＆＃13;

$(document).ready(function(){
  setInterval(rotateImages, 4000);
});

function rotateImages(){
  var currImage = $(".slider div.current");
  var nextimage = currImage.next();
  if (nextimage.length == 0){
    nextimage = $(".slider div:first");
  }

  nextimage.css({
    opacity: 0.0
  }).addClass("current").animate({
    opacity: 1.0
  }, 1000);
}

＆＃13;

.slider {
  width: 400px;
  height: 300px;
  border: 5px solid #fff;
  box-shadow: 0 0 25px black;
  margin: 5rem auto;
}

.slider div {
  position: absolute;
  z-index: 0;
}

.slider div.previous {
  z-index: 1;
}

.slider div.current {
  z-index: 2;
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

<div class="slider">
  <div class="current">
    <img src="https://dribbble.s3.amazonaws.com/users/4467/screenshots/257352/abraham-lewis.jpg" alt="">
  </div>
  <div>
    <img src="https://dribbble.s3.amazonaws.com/users/4467/screenshots/245651/robot.jpg" alt="">
  </div>
  <div>
    <img src="https://dribbble.s3.amazonaws.com/users/4467/screenshots/212240/brainoid.jpg" alt="">
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是因为您没有删除当前的课程，因此当下一个图像淡入时，您仍然可以看到当前图像。我也改变了下面的内容，以便css处理动画

＆＃13;

＆＃13;

$(document).ready(function() {
  setInterval(rotateImages, 4000);
});

function rotateImages() {
  var currImage = $(".slider div.current");
  var nextimage = currImage.next();
  if (nextimage.length == 0) {
    nextimage = $(".slider div:first");
  }

  currImage.removeClass('current');       // this is what is missing from your code
  nextimage.addClass("current");
}

＆＃13;

.slider {
  width: 400px;
  height: 300px;
  border: 5px solid #fff;
  box-shadow: 0 0 25px black;
  margin: 5rem auto;
}

.slider div {
  position: absolute;
  z-index: 0;
   
  transition: opacity 1s; /* let css handle the animation */
  opacity:0;
}

.slider div.previous {
  z-index: 1;
}

.slider div.current {
  z-index: 2;
  opacity:1;          /* let css handle the animation */
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

<div class="slider">
  <div class="current">
    <img src="https://dribbble.s3.amazonaws.com/users/4467/screenshots/257352/abraham-lewis.jpg" />
  </div>
  <div>
    <img src="https://dribbble.s3.amazonaws.com/users/4467/screenshots/245651/robot.jpg" />
  </div>
  <div>
    <img src="https://dribbble.s3.amazonaws.com/users/4467/screenshots/212240/brainoid.jpg" />
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在设置新div时，您需要清除之前的“当前”类。另外看着你的CSS，你似乎也需要“上一课”（？）。

你需要做这样的事情：

--whitelist

这会照顾 var prevImage = $(".slider div.previous"); prevImage.removeClass("previous"); currImage.removeClass("current").addClass("previous"); 和.current

.previous

$(document).ready(function() {
  setInterval(rotateImages, 4000);
});

function rotateImages() {
  var currImage = $(".slider div.current");
  var nextimage = currImage.next();
  if (nextimage.length == 0) {
    nextimage = $(".slider div:first");
  }

 var prevImage = $(".slider div.previous");
 prevImage.removeClass("previous");
  currImage.removeClass("current").addClass("previous");
  nextimage.css({
    opacity: 0.0
  }).addClass("current").animate({
    opacity: 1.0
  }, 1000);
}

.slider {
  width: 400px;
  height: 300px;
  border: 5px solid #fff;
  box-shadow: 0 0 25px black;
  margin: 5rem auto;
}

.slider div {
  position: absolute;
  z-index: 0;
}

.slider div.previous {
  z-index: 1;
}

.slider div.current {
  z-index: 2;
}