0

単純な Jquery 画像遷移ビューアーを作成しました。新しい写真が読み込まれるたびに、読み込まれたばかりの新しい画像の上部までウィンドウが自動的にスクロールします。ユーザーがページのどこにいても遷移が中断されないように、これを停止しようとしています。

これまでの私のコードは次のとおりです。

$(document).ready(function() {

var slideShow = function()
{
current_img = $("#current_img"); // <img> element with src to be changed
height_width = 'width="100%" height="100%"';
photos = new Array('images/home_s1.png','images/home_s2.png', 'images/home_s3.png');
setTimeout(function() { current_img.fadeOut('fast', function() { current_img.attr('src', photos[0]); current_img.fadeIn('slow'); }); }, 0);
setTimeout(function() { current_img.fadeOut('fast', function() { current_img.attr('src', photos[1]); current_img.fadeIn('slow'); }); }, 5000);
setTimeout(function() { current_img.fadeOut('fast', function() { current_img.attr('src', photos[2]); current_img.fadeIn('slow'); }); }, 10000);
setTimeout(function() { slideShow(); }, 15000);
}

$("img").ready(slideShow);

});

preventDefault() 関数を操作する複数の異なる方法を試しました。また、画像をロードするさまざまなバリエーション (つまり、img.attr('src') の代わりに html() にロードする) も試しましたが、うまくいきませんでした..これを達成するための最も効率的な方法について何か提案はありますか?

4

1 に答える 1

1

あなたが抱えていると思われる問題は、のデフォルトの実装で.fadeIn()あり、プロパティを に.fadeOut()設定することです。これにより、要素の高さと幅が 0 になり、一種のジャンプ効果が発生します。displaynone

代わりに次のようなものを使用.fadeTo()し、画像を切り替えるときに不透明度を 0 まで下げないでください。0.01 のような値でも十分であり、jQuery がdisplay属性を に変更することはありませんnone。

setTimeoutコールバック内で行う必要があることの例を次に示します。

setTimeout( function() { 
    current_img.fadeTo( 'fast', 0.01, function() { 
        current_img.attr('src', photos[0]); 
        current_img.fadeTo('slow', 1); 
    }); 
});
于 2012-08-05T09:27:59.597 に答える