Question

我正在尝试加载这5张图片，当第一张图片向上滑动时，第二张图片略微慢一点，下一张（右侧）滑动到第一张图像，第三张图像旁边第二张图像滑动等等。

问题是它们都以与第一个相同的方式向上滑动，并且只有在加载时它们才会位于所需的位置。

$(window).load(function() {
  $(".img").show("slide", {
    direction: "down"
  }, 400);
  $(".img1").show("slide", {
    direction: "down"
  }, 500);
  $(".img2").show("slide", {
    direction: "down"
  }, 600);
  $(".img3").show("slide", {
    direction: "down"
  }, 700);
  $(".img4").show("slide", {
    direction: "down"
  }, 800);
});

.img {
  display: none;
}

.img1 {
  display: none;
}

.img2 {
  display: none;
}

.img3 {
  display: none;
}

.img4 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<div style="height: 200px"><img class="img" src="http://placehold.it/200" />
  <img class="img1" src="http://placehold.it/200" />
  <img class="img2" src="http://placehold.it/200" />
  <img class="img3" src="http://placehold.it/200" />
  <img class="img4" src="http://placehold.it/200" />
</div>

Answer 1

这就是你如何做到的

$(window).load(function() {
  $(".img").each(function(i){
    $(this).show("slide", {
      direction: "down"
    }, i * 800);
  });
});

.containImgs{
  background : #000;
  padding : 5px 0px;
  overflow : hidden;
}
.img {
  display: none;
  float : left;
  width : 19%;
  margin : 0.48%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<div class="containImgs"><img class="img" src="http://placehold.it/200" />
  <img class="img" src="http://placehold.it/200" />
  <img class="img" src="http://placehold.it/200" />
  <img class="img" src="http://placehold.it/200" />
  <img class="img" src="http://placehold.it/200" />
</div>

备注：

您只需使用一个

就无需使用更多课程

当您不知道图像的最终高度时，无需设置div的高度

您可以使用img更改示例中的div元素，如果您需要我更喜欢使用div内部，以便在边距或填充div内容时使所有内容都清晰

如果你想将它包装在div
中，这是另一个例子

$(window).load(function() { $(".no_margin_or_padding").each(function(i){ $(this).show("slide", { direction: "down" }, i * 800); }); });

.main_container{ background : #000; padding : 5px 0px; overflow : hidden; } .main_container > div.no_margin_or_padding { display: none; float : left; width : 19.97%; overflow : hidden; } .main_container > div.no_margin_or_padding > div.you_can_add_margin_or_padding{ padding : 5px; background : red; } .img{ width : 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <div class="main_container"> <div class="no_margin_or_padding"> <div class="you_can_add_margin_or_padding"> <img class="img" src="http://placehold.it/200"/> </div> </div> <div class="no_margin_or_padding"> <div class="you_can_add_margin_or_padding"> <img class="img" src="http://placehold.it/200"/> </div> </div><div class="no_margin_or_padding"> <div class="you_can_add_margin_or_padding"> <img class="img" src="http://placehold.it/200"/> </div> </div><div class="no_margin_or_padding"> <div class="you_can_add_margin_or_padding"> <img class="img" src="http://placehold.it/200"/> </div> </div><div class="no_margin_or_padding"> <div class="you_can_add_margin_or_padding"> <img class="img" src="http://placehold.it/200"/> </div> </div> </div>

注意：当您使用5张图片20时宽度百分比应为100/5 = 20，但show()幻灯片效果会使最后一个div执行到底部我使用19.97来代替屏幕

水平图像向上滑动

1 个答案: