jQueryを使用してフェードまたは画像の移行効果を追加する方法は?
-
27-10-2019 - |
質問
私には1つだけです <img>
私のページの要素。私は変更します src
7秒ごとにこの画像の属性。
7秒ごとに新しい画像が表示されますが、新しい画像をロードするときにフェードまたは遷移効果を追加できれば、より良いでしょう。
これのための簡単なスクリプトを持っている人もいますか?
プラグインは必要ありません。それを行うために、いくつかの手がかりまたは数行のサンプルが必要です。
解決
Kaiqingが言及したことにもかかわらず、jqueryのコールバック機能を使用して、変更中に画像をフェードイン/アウトすることができます。これはそうすることができます: http://www.jsfiddle.net/bradchristie/hskpq/1/
$('img').fadeOut('slow',function(){
$(this).attr('src','/path/to/new_image.png').fadeIn('slow');
});
他のヒント
2つの画像を使用する必要があります。
<img id="backImg" />
<img id="frontImg" />
設定 #backImg
後ろにいること #frontImg
そのようです:
#backImg
{
position: absolute;
}
次に、7秒ごとに発射するコードでは、フロントイメージをフェードアウトします...これは、バックイメージがすでにその背後にロードされているため、クロスフェード効果を自動的に実行します。フェードが完了したら、フロント画像のソースを背面画像のSRCに設定し、表示し、次の画像をバック画像に事前ロードします。
function transitionImages(preloadImgUrl)
{
$("#frontImg").fadeOut("slow", function()
{
$("#frontImg").attr("src", $("#backImg").attr("src")).show();
$("#backImg").attr("src", preloadImgUrl);
}
}
これはすべて、画像が同じサイズであると仮定しています。そうでない場合は、CSSでもう少し詳しく説明し、フェードアウトするDivに画像をラップしたいと思うでしょう。
1つの画像でこれを行うことはできません。
これをチェックしてください:
<div id="main_over"></div>
<div id="main_img"></div>
<div id="himg" style="display:none; clear:both; margin-top:40px;">
<img id="si_15" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_1__large.jpg" alt="dummy_image_large_1" />
<img id="si_16" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_2__large.jpg" alt="dummy_image_large_2" />
<img id="si_17" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_3__large.jpg" alt="dummy_image_large_3" />
<img id="si_18" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_4__large.jpg" alt="dummy_image_large_4" />
</div>
<style>
#main_over{position:absolute; z-index:10; width:800px; height:600px; background:#fff; display:block;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var i = 0;
$('#himg img').each(function(){
if(i == 0)
{
$('#main_over').html('<img src="' + $(this).attr('src') + '" alt="" />');
}
if(i == 1)
{
$('#main_img').html('<img src="' + $(this).attr('src') + '" alt="" />');
}
i ++;
slide.arr.push($(this).attr('src'));
});
setTimeout(function(){
if(slide.arr.length < 2)
slide.fade(0);
else
slide.fade(2);
}, 3000);
});
var slide = {
arr: Array(),
fade: function(i)
{
$('#main_over').fadeOut("medium");
setTimeout(function(){slide.next(i);}, 1000);
},
next: function(i)
{
$('#main_over').html($('#main_img').html());
$('#main_over').css('display', 'block');
$('#main_img').html('<img src="' + slide.arr[i] + '" alt="" />');
i++;
if(i >= slide.arr.length)
i = 0;
setTimeout(function(){slide.fade(i);}, 3000);
}
}
</script>
所属していません StackOverflow