Jquery 图片库 DOM 在第一个循环中不起作用，在第二个循环中起作用答案

【问题标题】：Jquery image gallery DOM doesnt work on first loop does on secondJquery 图片库 DOM 在第一个循环中不起作用，在第二个循环中起作用
【发布时间】：2014-12-16 00:01:25
【问题描述】：

我正在尝试制作一个 jquery 基本图像轮播，单击箭头时图片应该淡出然后下一个淡入，但它无法正常工作并且动画第一次没有显示。但是，一旦看到图片，它就会正常工作。

var main = function() {

  $('.arrownext').click(function() {
    var currentSlide = $('.active');
    var nextSlide = currentSlide.next();

    if (nextSlide.length == 0) {
      nextSlide = $('.pic').first();
    }

    currentSlide.fadeOut(500).removeClass('active');
    nextSlide.fadeIn(500).addClass('active');

  });

  $('.arrowprev').click(function() {
    var currentSlide = $('.active');
    var prevSlide = currentSlide.prev();

    if (prevSlide.length == 0) {
      prevSlide = $('.pic').last();
    }

    currentSlide.fadeOut(500).removeClass('active');
    prevSlide.fadeIn(500).addClass('active');
  });
};

$(document).ready(main);

.arrowprev {
  float: left;
  margin-left: 30px;
}
.arrownext {
  float: right;
  margin-right: 30px;
}
.arrow img {
  margin-top: 140px;
  cursor: pointer;
  padding: 10px 20px 10px 20px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.8);
}
.pictures {
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
  padding-bottom: 20px;
}
.pic img {
  display: none;
  position: absolute;
  padding: 10px 20px 10px 20px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  left: 0;
  right: 0;
  margin: auto;
}
.active img {
  display: block;
  position: absolute;
  padding: 10px 20px 10px 20px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  left: 0;
  right: 0;
  margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pictures">
  <div class="pic active">
    <img src="http://consequenceofsound.files.wordpress.com/2013/07/number1.jpg" style="height:350px;">
  </div>
  <div class="pic">
    <img src="http://tomreynolds.com/wp/wp-content/uploads/2014/01/2-graphic.png" style="height:350px;">
  </div>
  <div class="pic">
    <img src="http://upload.wikimedia.org/wikipedia/commons/6/69/VET_3_circle.png" style="height:350px;">
  </div>
  <div class="pic">
    <img src="http://www.westerndemons.com/.a/6a00d83420ece353ef01a73dbf8bb3970d-pi" style="height:350px;">
  </div>
</div>

<div class="arrow">
  <img class="arrowprev" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-left-01-128.png" alt="bed" style="width:20px;">
  <img class="arrownext" src="http://www.myiconfinder.com/uploads/iconsets/7e81c2f3697b91ee17fe6ed6348c232a-Arrow.png" alt="bed" style="width:20px;">
</div>

【问题讨论】：

检查你的第一个 img src。从你的逻辑代码来看，没关系。
谢谢托德，图像加载正常，我想知道我是否没有正确“隐藏”它们或其他什么，如果你运行代码 sn-p 你可以看到它“跳跃”通过数字直到它达到数字 4 然后它开始动画和褪色，因为它应该。不知道第一次看到图片和第二次有什么区别？！

标签： jquery image animation dom carousel

【解决方案1】：

这是因为您在包含图像的div 上调用fadeIn，而不是图像本身。但是，divs 未设置为 display:none，因此它们在第一次循环时从可见中淡入。

第二次时，它们已淡出，因此设置为display:none。

添加：

.pic { display: none; }

会解决的。

【讨论】：

感谢您，这是朝着正确方向迈出的一大步！现在我又遇到了两个问题：1.第一张图片在网站启动时没有加载 2.图片在滚动时不会淡出，一旦删除类，它们就会立即消失。
.active { 显示：块； } 解决了第一个问题，我会在解决后发布第二个问题的答案！
不要将.removeClass 链接到.fadeOut。相反，使用 .fadeOut(500, function() { $(this).removeClass('active'); }) 仅在类淡出后删除它。