私はこれで立ち往生しているので、誰かが助けてくれることを願っています.
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
});
}
誰かがより良い解決策を知っている場合、または個々の画像でそれを機能させる方法を知っている場合は、お知らせください。ありがとう。