Question

我想要经历一个充满图像的div，每5秒钟，我想要隐藏当前的一个，然后显示下一个。

这是我的html（带有一丝嵌入式红宝石），请查看下面客户端的内容：

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

这是我的HTML（带着一丝讽刺的悲伤）：

<div class="home-images">
  <img alt="Taylor" class="home-image" src="/assets/taylor.jpg">
  <img alt="Wide" class="home-image hide" src="/assets/wide.jpg">
  <img alt="Sad" class="home-image hide" src="/assets/sad.jpg">
</div>

这是我的javascript（目前无效）：

$(document).ready(function() {
  var imagesLength = $(".home-image").length
  if(imagesLength) {
    $(".home-image").each(function(index) {
      setTimeout(function() {
        setInterval(function() {
          $(this).toggleClass("hide");
          setTimeout(function() {
            $(this).toggleClass("hide");
          }, 5000);
        }, imagesLength*5000);
      }, index*5000);
    });
  }
});

Answer 1

你可以用一个间隔

来做

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

演示：Fiddle

Answer 2

你应该只在一个交换图像的函数上设置一次间隔。你想要2个类，.Visible和.Hidden，

在交换功能n区间你会通过for循环遍历所有子项（图像）直到children（）。length，并找到当前可见的那些。

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

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

Answer 3

你可以像

一样使用它

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

Demo

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

3 个答案: