6

私はこれで立ち往生しているので、誰かが助けてくれることを願っています.

jCarousel Lite を使用している Web サイトがあり、画像にズームイン効果とフェード効果を追加しました。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