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>

其中两个图像具有隐藏类，可将其设置为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();
}

当我认为您要将其显示为0时，您的fadeTo将已显示图像的不透明度设置为1。您需要在显示时将其重置，因为fadeTo（）设置了元素的style属性，如果不重置，它将保留在0。

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

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

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>