Javascript Twitter引导旋转木马幻灯片,带js代码
我想在一个网站上制作一组js/css动画的幻灯片。我使用bootstrap作为它的框架。旋转木马听起来像是幻灯片中幻灯片的内置功能,但看起来像是用于图像。我的是js动画,我发现很难处理它。有没有更好的基于引导框架的方法 这是引导中的旋转木马:Javascript Twitter引导旋转木马幻灯片,带js代码,javascript,css,twitter-bootstrap,slideshow,Javascript,Css,Twitter Bootstrap,Slideshow,我想在一个网站上制作一组js/css动画的幻灯片。我使用bootstrap作为它的框架。旋转木马听起来像是幻灯片中幻灯片的内置功能,但看起来像是用于图像。我的是js动画,我发现很难处理它。有没有更好的基于引导框架的方法 这是引导中的旋转木马: <!-- Carousel - consult the Twitter Bootstrap docs at http://twitter.github.com/bootstrap/javascript.html#carousel --
<!-- 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">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div><!-- /.carousel -->
标题文本在这里
标题文本在这里
标题文本在这里
标题文本在这里
我正在尝试做什么,但却把事情搞砸了:您可以将活动滑块与
$('.carousel').carousel()一起使用
在每张幻灯片上,您都可以使用js/css效果
$('.carousel').on('slide.bs.carousel', function () {
// js function etc.
});
例如,我为每张幻灯片的文本动画使用了动画css,您也可以使用图像js等