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')
  })

}

感谢所有的帮助:)

标签： javascriptjqueryhtmlcss

Answer 1

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

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

当我认为您的意思是将其设置为 0 时，您的 fadeTo 正在将已显示的图像的不透明度设置为 1。您需要在显示时重置它，因为 fadeTo() 设置了元素的样式属性，如果不重置，它将保持为 0。

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

最后，该not()方法使用了错误的选择器，排除了名为ie的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>