推特引导旋转木马幻灯片与js代码

Twitter bootstrap carousel slideshow with js code

本文关键字：js 代码 幻灯片 旋转木马      更新时间：2023-09-26

我想在一个网站上制作一堆js/css动画的幻灯片。我使用bootstrap作为它的框架。旋转木马听起来像一个内置的功能，在幻灯片中显示幻灯片，但似乎它是为图像。我的是js动画，我发现很难处理它。有没有更好的方法来做它基于bootstrap框架?

这是Carousel在bootstrap:

<!--  Carousel - consult the Twitter Bootstrap docs at 
      http://twitter.github.com/bootstrap/javascript.html#carousel -->
<div id="this-carousel-id" class="carousel slide"><!-- class of slide for animation -->
  <div class="carousel-inner">
    <div class="item active"><!-- class of active since it's the first item -->
      <img src="http://placehold.it/1200x480" alt="" />
      <div class="carousel-caption">
        <p>Caption text here</p>
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/1200x480" alt="" />
      <div class="carousel-caption">
        <p>Caption text here</p>
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/1200x480" alt="" />
      <div class="carousel-caption">
        <p>Caption text here</p>
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/1200x480" alt="" />
      <div class="carousel-caption">
        <p>Caption text here</p>
      </div>
    </div>
  </div><!-- /.carousel-inner -->
  <!--  Next and Previous controls below
        href values must reference the id for this carousel -->
    <a class="carousel-control left" href="#this-carousel-id" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#this-carousel-id" data-slide="next">&rsaquo;</a>
</div><!-- /.carousel -->

我想做的事情却把事情搞砸了:

您可以使用活动的滑块与$('.carousel').carousel();和在每个幻灯片上，您可以使用您的js/css效果与

$('.carousel').on('slide.bs.carousel', function () {
 // js function etc.
});

例如http://jsbin.com/kekocuha/1，我使用animate css为每个幻灯片的文本动画，你也可以使用你的images js等。

相关文章：