Question

基于对象数组构建滑块容器时遇到问题。通过curl - php调用json内容后，我得到一个这样的页面：

<div id ="slider" class="grid">
  <!-- one -->
  <div class="top"></div>
  <div class="left"></div>
  <div class="right"></div>
  <div class="bottom"></div>
  <!-- two -->
  <div class="top"></div>
  <div class="left"></div>
  <div class="right"></div>
  <div class="bottom"></div>
  <!-- three -->
  <div class="top"></div>
  <div class="left"></div>
  <div class="right"></div>
  <div class="bottom"></div>
  <!-- many... -->
  <div class="top"></div>
  <div class="left"></div>
  <div class="right"></div>
  <div class="bottom"></div>
</div>

我需要通过幻灯片循环浏览这些元素，其中每张幻灯片显示四个div（顶部，左侧，右侧，底部）。有人会以正确的方式把我？非常感谢。

更新：环顾四周后，我发现了解决方案/ workaroud：它与此帖Wrapping sets of elements from a list in DIVs using jQuery有关，并附带一个jsfiddle http://jsfiddle.net/QWHYK/。我用span标签包装了所有div，并用一行代码包装元素（我无法在jquery代码中使用'div'代替'span'，所以我做了：

<div id="slider" class="grid>
  <!-- one -->
  <span><div class="top"></div></span>
  <span><div class="left"></div></span>
  <span><div class="right"></div></span>
  <span><div class="bottom"></div></span>
 <!-- continue .... -->

while ($('#slider > span').length) {
$('#slider > span:lt(4)').wrapAll('<div class="row slide" />');
}

我得到了这个：

<div id="slider" class="grid>
  <!-- one -->
  <div class="row slide">
        <span><div class="top"></div></span>
        <span><div class="left"></div></span>
        <span><div class="right"></div></span>
        <span><div class="bottom"></div></span>
  </div>
  <!-- continue... -->
</div>

这是我能在短时间内做到的最好的事情。

Answer 1

您可能需要做的第一件事是找到一种方法将四个div的每个集合中的每一个包装成一个包装器div。给每个包装div提供一个名为.slide或类的东西。

你能够达到那个目的吗？在此之后，实现滑块不应该太难。有很多插件能够做到这一点。你有没有考虑像Slick Carousel这样的东西：http://kenwheeler.github.io/slick/ - 看起来Demo 2可能就是你所需要的。

希望有所帮助，马克

基于php数组的Jquery内容滑块

1 个答案: