6

我被困在这个问题上，所以希望有人可以提供帮助。

我有一个使用 jCarousel Lite 的网站，我在图像上添加了放大效果和淡入淡出效果。这是初始化 jCarousel lite 的代码。

window.onload = function() {
    jQuery("#midbody").jCarouselLite({
        auto: 3000,
        speed: 0,
        circular: true,
        beforeStart: function(a) {
          width = jQuery(a).find("img").width() * zoom;
          height = jQuery(a).find("img").height() * zoom;
          jQuery(a).stop(false,true).find("img").animate({"width":width, "height":height, "top":move, "left":move}, 2000, "linear", function(){ jQuery(this).removeAttr("style");});
          jQuery(a).parent().fadeTo(1000, 0);
        },
        afterEnd: function(a) {
          jQuery(a).parent().fadeTo(1000, 1);
        },
        visible: 1
    });
  }

这是我一直试图让它工作的网站。

关联

如果您观看轮播，第一次运行一切正常，但之后我未排序列表中的第一张图像不再缩放。列表中的其余图像将继续缩放，这只是第一个出现此问题的图像。我认为可能是jCarouselLite有问题，但我找不到任何东西。谢谢。

/* 编辑 */

StackOverflow 不允许我回答我自己的问题，因为我刚刚创建了这个帐户。所以我想我会编辑原件并添加它。对不起，如果这不被认为是犹太洁食。

好的，我想出了一个解决方案。我不必在可见的单个图像上触发动画，而是必须在轮播中的每个图像上触发动画。然后我使用jcarousellite的回调完成后停止所有图像上的所有动画，并重置样式属性。这是修改后的代码。

window.onload = function() {
jQuery("#midbody").jCarouselLite({
    auto: 5000,
    speed: 0,
    circular: true,
    beforeStart: function(a) {
      width = jQuery(a).find("img").width() * zoom;
      height = jQuery(a).find("img").height() * zoom;
      jQuery(a).parent().find("img").animate({"width":width, "height":height, "top":move, "left":move}, 2000, "linear");
      jQuery(a).parent().fadeTo(1000, 0);
    },
    afterEnd: function(a) {
      jQuery(a).parent().find("img").stop(true,true).removeAttr("style");
      jQuery(a).parent().fadeTo(1000, 1);
    },
    visible: 1
});

}

如果有人知道更好的解决方案，或者如何让它在单个图像上工作，请告诉我。谢谢。

4

0 回答 0