Question

我坚持这个，所以希望有人可以提供帮助。

我有一个网站，我正在使用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
    });
  }

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

link

如果您观看旋转木马，一切都运行良好，第一次四处走动，但在此之后，我的未排序列表中的第一张图像不再缩放。列表中的其余图像将继续缩放，这只是第一个出现此问题的图像。我认为这可能是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
});

}

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

jCarousel Lite具有缩放和淡入淡出效果

0 个答案: