Javascript 隐藏当前图像并显示下一个图像

我想通过一个充满图像的div，每5秒，我想隐藏当前一个，然后显示下一个

这是我的html，带有嵌入式ruby的提示，请查看下面的客户端：

<div class="home-images">
  <%= image_tag "taylor.jpg", class: "home-image" %> <!-- Rails way to create img tag with class -->
  <%= image_tag "wide.jpg", class: "home-image hide" %>
  <%= image_tag "sad.jpg", class: "home-image hide" %>
</div>

---

对于将交换图像的函数，您可能应该只设置一次间隔。 您希望有两个类，.Visible和.Hidden

在交换函数n的时间间隔中，您将 使用for循环直到childrence.length遍历所有子图像，并找到当前可见的子图像

然后将其设置为不可见，并将下一个设置为可见i+1

---

如果可见的是最后一个，则将i=0变为可见。

只需一个间隔即可

jQuery(function ($) {
    var $ct = $('.home-images');
    setInterval(function () {
        $ct.find('img').first().addClass('hide').appendTo($ct);
        $ct.find('img').first().removeClass('hide')
    }, 1000)
})

演示：

您可以像

var current=0;
setInterval(function(){
  $(".home-image").addClass("hide");
  $(".home-image").hide();
  $(".home-image").eq(current).removeClass("hide").show();
   current=(current % $(".home-image").length )+1;
 },1000);

---

那不是真的HTML@Pointy如果您没有注意到div标记，那么这就是HTML。它有一个小红宝石嵌入其中。希望不会吓到你much@undefined是 啊在我几次都没能得到它之后，我有点过火了，刚刚发布了我的最后一次工作迭代。在诊断客户端问题时，发布客户端代码非常有帮助。这是一个非常优雅的解决方案。非常感谢。我在我的问题中添加了if语句，因为我的JS包含在rails的每个页面中，所以不完全相关

jQuery(function ($) {
    var $ct = $('.home-images');
    setInterval(function () {
        $ct.find('img').first().addClass('hide').appendTo($ct);
        $ct.find('img').first().removeClass('hide')
    }, 1000)
})

var current=0;
setInterval(function(){
  $(".home-image").addClass("hide");
  $(".home-image").hide();
  $(".home-image").eq(current).removeClass("hide").show();
   current=(current % $(".home-image").length )+1;
 },1000);