滑块中的图像以奇数顺序显示答案

【问题标题】：Images in slider appear in odd order滑块中的图像以奇数顺序显示
【发布时间】：2018-01-11 11:42:46
【问题描述】：

谁能向我解释为什么在下一个图像长度为 0 时显示 1 和 3 个图像。当出现第 3 个图像时，它的长度为 0，因此根据条件将第一个图像存储在其中，但我不明白发生了什么

$(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);
}

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

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

【问题讨论】：

在格式化代码和描述问题时请小心。这就是为什么你有这么多反对票和接近票的原因。我已经编辑了这个问题，希望现在更清楚一点。
可能是因为你从不删除当前类

标签： javascript jquery html css slider

【解决方案1】：

这是因为您尚未删除当前课程，因此当下一张图片淡入时，您仍然可以看到当前图片。我还更改了以下内容，以便 css 处理动画

$(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");
}

.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 */
}

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

【讨论】：

【解决方案2】：

在设置新 div 时，您需要清除之前的“当前”类。还看看你的 css，看来你也需要“上一个”类（？）。

你需要做这样的事情：

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

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

【讨论】：