jQuery跑马灯动画跳跃问题

Question

我正在使用 CarouFredSel jQuery 插件(http://caroufredsel.dev7studios.com) 在我的网站上创建动画走马灯。但是，我注意到动画效果不正确 - 它移动得太远了（与我编码的设置相比），然后在动画结束时跳到正确位置。

这是出现问题的页面: http://mnogal.pl/kopernik/html/strona_glowna.html - 文字应始终位于中间，动画应仅将下一行文字移动到中间。

目前它的设置如图 1 - 文字 - 图 2 - 文字 - 图 1 等，因此在每次动画后应交替两个图片的位置，如果有意义的话。

在动画结束后，它最终会显示正确的内容，只是在动画过程中动画范围太大并且在结束前跳跃。

我已经检查了侧边栏上的演示文稿，没有发生类似的事情，我的代码也似乎是正确的，没有什么特别之处。

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

有人能帮忙吗？我搞不清楚这个问题。

- Justine

---

提醒您，当访问您的网站时，我遇到了一个JS语法错误 - $("#map, #mapa").animate({opacity: 1}, 500; - 看起来您把动画持续时间放错位置了 :)。我只是想告诉您一声。 - Pebbl

正如Dieter所说，您的服务器缺少文件“scripts.js”。http://mnogal.pl/kopernik/html/js/ - thingEvery

scripts.js没有放在正确的路径中。 - rajesh kakawat

Answer 1

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

- Dieter

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

- Michael J. Calkins

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>

- ichigolas