Question

我正在使用CarouFredSel jQuery插件（http://caroufredsel.dev7studios.com）在我的网站上创建动画轮播。但是，我注意到动画不正确 - 它动画太过分了（与我编码的设置相比），然后在动画结束时，它会跳到正确的位置。

以下是发生错误的页面：http://mnogal.pl/kopernik/html/strona_glowna.html - 文本应始终位于中间，动画应移动到下一个文本位于中间位置。

它的设置类似于PIC 1 - TEXT - PIC 2 - TEXT - PIC 1等，所以它应该在每个动画后交替两个图片位置，如果这是有意义的。

我最终在动画之后显示正确的东西，它只是动画太远而且在它结束之前跳跃。

我检查了侧面的演示，没有发生这样的事情，我的代码似乎也是正确的，没有任何异常：

$("#carousel .overview").carouFredSel({
    height: 507,
    items: {
          visible: 3,
    },
    scroll: {
        items: 2,
        duration: 3000
    },
    auto: 6000
});

有人可以帮忙吗？我无法弄清楚这一点。

Answer 1

服务器上没有scripts.js（http://mnogal.pl/kopernik/html/js/scripts.js）。此生成的错误会阻止其他JavaScript运行。首先解决这个问题！

Answer 2

我可以推荐Twitter Bootstrap。

底部的示例：http://twitter.github.com/bootstrap

轮播示例：http://twitter.github.com/bootstrap/examples/carousel.html

轮播代码：http://twitter.github.com/bootstrap/javascript.html#carousel

Answer 3

您可以尝试这样做：http://jsfiddle.net/mW5Y9/2/。 @MichaelCalkins的实时演示。

<div id="myCarousel" class="carousel slide" data-interval="your_interval_in_secs">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</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>

jQuery轮播动画跳跃

3 个答案: