Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

这是因为您在fadeIn上调用了包含图片的div，而不是图片本身。但是，div s未设置为display:none，因此它们会在第一轮中从可见区域淡入。

第二次，他们已经淡出，所以他们被设置为display:none。

添加：

.pic { display: none; }

将修复它。

Jquery图像库DOM在第二次循环时不起作用

1 个答案: