jquery - 水平方向无限幻灯片放映

Question

几天前，我在http://www.billboard.com/上发现了一个非常有趣的幻灯片。我试图弄清楚如何重建它，但我悲惨地失败了。

这就是我已经完成的，我对 jQuery 的了解并不好完成它。

这里有一个 Dropbox 链接供大家使用，他们希望对我的代码进行一点预览，以实现我的基本想法。 https://www.dropbox.com/s/pb19ydkkr7du2cl/slide.php

所以这取决于你们，希望你们能给我一个“简单”的解决方案来解决我的问题（无休止的幻灯片和内容之间的间隔切换）。

Answer 1

我没有看你的代码，但从我的脑海中，我会说你需要像引导轮播这样的东西：http: //twitter.github.io/bootstrap/javascript.html#carousel

它很容易设置。所有文档都在我添加到这个答案的那个链接中。最基本的是，您将 next 和 prev 图标保留在 an 中<ol>，并将每个图像保留在带有 class 的 div 中item：

<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…&lt;/div>
    <div class="item">…&lt;/div>
    <div class="item">…&lt;/div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>