1

私はこのコードを使用しています。画像を変更すると、画像がフェードアウトしてから他の画像がフェードインします。その間、見たくない背景色が表示されます。画像をフェードインすると同時に次の画像をフェードインする簡単な方法、または画像をスライドさせるような別のjQuery効果はありますか？背景色を見たくないだけです。

<script type="text/javascript">
$(document).ready(function(){
    var imgArr = new Array( // relative paths of images
        'css/images/main_img.jpg',
        'css/images/main_img_2.jpg',
        'css/images/main_img_3.jpg',
        'css/images/main_img_4.jpg',
        'css/images/main_img_5.jpg'
    );

    var preloadArr = new Array();
    var i;

    /* preload images */
    for(i = 0; i < imgArr.length; i++){
        preloadArr[i] = new Image();
        preloadArr[i].src = imgArr[i];
    }

    var currImg = 1;
    var intID = setInterval(changeImg, 6000);
    //added this so that the first image is always the first from the array
    $('#main_content').css('background','url(' + preloadArr[0].src +') top center no-repeat');
    /* Main IMG */
    function changeImg(){
        $('#main_content').animate({opacity: 0}, 1000, function(){
            $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') top center no-repeat');
        }).animate({opacity: 1}, 1000);
    }
});
</script>
4

3 に答える 3

1

この効果は、1つの要素だけでは達成できません。2つ目の要素を重ねてフェードインする必要があります。フェードインしたら、後ろの要素を非表示にすることもできますが、必須ではありません。

このtutotrialを参照してください：http：//bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/

于 2012-09-21T18:02:52.027 に答える
1

cssの背景を変更しているため、単一の要素に対してこれを行うことはできません。

これは、（コンテンツがフェードアウトする前に）次の背景画像を保持し、静的なcss位置状態とz-indexプロパティを使用せずに#main_content要素の下に配置される別のdivで実現できます。

于 2012-09-21T18:03:35.630 に答える
0

ここでは、Jqueryを使用して単純なJavaScriptフェード効果アニメーションを作成するためのコードを記述しました。これは、すばらしい画像アニメーションの作成に役立つ場合があります。

最初に次のスクリプトを追加してjquery.min.jsをインポートするか、このスクリプトを自分でホストできます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

ここにCSSコードを書いてください

.fadeおよび.fadeimg

.fade 
{ 
box-shadow:1px 1px 5px 2px #6DC83C; 
position:relative; 
width:500px; 
height: 300px; 
border-radius:19px; 
} 

.fade img 
{ 
border-radius:19px; 
position:absolute; 
left:0;
top:0; 
}

そして、次のコードを使用します。

<script> $(function(){ $('.fade img:gt(0)').hide(); setInterval(function(){$('.fade    :first-child').fadeOut(3000).next('img').fadeIn(3000).end().appendTo('.fade');}, 4000); });    </script>

次に、画像に次のコードを使用します。

<div class="fade"> 
<img src="image_1.gif"> 
<img src="image_2.gif"> 
<img src="image_3.gif"> 
</div>
于 2013-12-12T05:16:22.497 に答える