javascript - JQuery img 循环

Question

我在处理图像动画时遇到问题，似乎无法弄清楚。

<div id="img_loop">
  <img src="img/img1.jpg" alt="image1" />
  <img src="img/img2.jpg" alt="image2" class="hidden" />
  <img src="img/img3.jpg" alt="image3" class="hidden" />
</div>

其中两个图像具有 hidden 类，设置了它们的 css display=none；

我有这三张图片，想通过在“隐藏”类中在它们之间切换来进行连续循环，以便它是三张图片的幻灯片，一次只有一张不隐藏。

我正在按照这些思路尝试一些东西

$(function(){
  setInterval("updateImage()", 2500);
})

function updateImage() {

  var $active = $('#img_loop img').not('hidden');

  var $next = $active.next();

  $active.fadeTo(1000, 1.0, function(){
    $active.addClass('hidden');
    $next.removeClass('hidden')
  })

}

感谢所有的帮助:)

Answer 1

备注next()不会进行循环查找，这意味着如果事件图像是最后一个 next() 将不会选择第一个图像。您需要进行检查并选择第一张图像(如果它位于末尾)。

if($next.length == 0){
    $next = $('#img_loop img').first();
}

你的 fadeTo 将已经显示的图像的不透明度设置为 1，而我认为你的意思是将它设置为 0。你需要在显示时重置它，因为 fadeTo() 设置元素的样式属性，如果不重置，它将保留在0.

$next.removeClass('hidden').css("opacity","initial")

最后是 not()方法使用了错误的选择器，not('hidden')排除名为 hidden 的元素即<hidden> , 正确的选择器应该是 .hidden为类(class)。

var $active = $('#img_loop img').not('.hidden');

---

演示

$(function(){
  setInterval("updateImage()", 2500);
})

function updateImage() {

  var $active = $('#img_loop img').not('.hidden');
  var $next = $active.next();
  if($next.length == 0){
     $next = $('#img_loop img').first();
  }
  $active.fadeTo(1000, 0.0, function(){
    $active.addClass('hidden');
    $next.removeClass('hidden').css("opacity","initial")
  })

}

.hidden {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="img_loop">
  <img src="https://placebear.com/g/64/64" alt="image1" />
  <img src="https://placebear.com/g/63/63" alt="image2" class="hidden" />
  <img src="https://placebear.com/g/62/62" alt="image3" class="hidden" />
</div>