1

それで、私は自分のウェブサイトのスライドショーを作ろうとしています。スライドショーが正常に動作するようになりましたが、画像の変更の前後に不透明度をゆっくりと上下に変更して、画像間にフェードを追加することにしました。私は彼のコードを何度も読みましたが、以下のコードのロジックを理解するのは少し難しいですが、非常にスムーズに動作するはずです. for ループを使用して、個々の不透明度の変更ごとに setTimeout ステートメントを生成しています。

//Shortcut for getElementById()
function e(eel) {
    return document.getElementById(eel);
}

//Slideshow
window.slideShow();

function slideShow(){
    var a = setTimeout(loopChange,8000);
    var b = setTimeout(function(){changeSrcTo("Other/noctis.jpg")},10000);
    var c = setTimeout(loopChange,18000);
    var d = setTimeout(function(){changeSrcTo("Other/retriever.jpg")},20000);
    var e = setTimeout(loopChange,28000);
    var f = setTimeout(function(){changeSrcTo("Other/miningop2.jpg")},30000);
    var g = setTimeout(slideShow,30000);
}
function changeSrcTo(thisSrc){
    e('dynimg').src=thisSrc;
}
function loopChange(){
    for(i=0;i<=10;i++){
        var t = setTimeout(function(){changeOpacity((1-(i*0.02)))},(i*200));
    }
    for(i=0;i<=20;i++){
        var u = setTimeout(function(){changeOpacity((0.6+(i*0.02)))},((i*200)+2000));
    }
}
function changeOpacity(oValue){
    e('dynimg').style.opacity=oValue;
    e('dynimg').style.filter="alpha("+(oValue*100)+")"; 
}

皆さんにコードをぶつけてしまったことを深くお詫び申し上げます。私のひどいコードがあまり混乱しないことを願っています。基本的に、それは非常にびくびくしており、img が変更される 1 秒前にフェードアウトするだけで、フェードバックしません。次の画像がフェードインする代わりに、不透明度 1.0 で変化して表示されます。

4

2 に答える 2

1

1) divを作る

2）画像の寸法に合わせて高さを設定します

3) これを使う

 function toggleImg(imgurl,effectDuration)
 {
     $('#DIV').animate( {opacity: 0}, effectDuration/2 , function(){
         $(this)
             .css( { 'background-image': 'url('+imgurl+')' } )
             .animate( {opacity: 1} , effectDuration/2 );
     });
 }
 //~ can't get any easier than that.



……:::::::::::: A Big Friendly Button!......



できないから animate( { backgroundImage: 'img.png',opacity:1 }, 500);

私たちは即興で演奏しなければなりませんでした。

ステップ 1.フェードアウト
$('#DIV').animate({opacity: 0}, fadeDuration/2 , function(){ /*on completion*/});

ステップ 2.画像を変更する
function(){ $(this).css({'background-image':'url('+imgurl+')'}) ...

ステップ 2.フェードイン
... animate({opacity:1},fadeDuration/2); ...



~> コード ... 説明

$('#div')とまったく同じロジックに従いdocumentGetElementById('div')
ますが、JQuery 関数を使用できます。

アニメーション化

  1. アニメーションする CSS プロパティ

  2. アニメーションの長さ

  3. アニメーションが完了したときに呼び出される関数。

CSS

「background-image」は css プロパティで、imgurl はその値です。つまり、「../img/hello.png」

jquery では、ほとんどの関数が $(this) を返すため、link 多くの関数を呼び出すことができます。

$('#mydiv').css().animate().toggle().css().animate() // ... etc ...



~> つまり

.animate( /* objects with their values */ , /* duration */ , /* callback function */ )
.css( /* objects with their values */ )



~> 必要に応じて、これを行うこともできます。

 function callMeWhenUrDone()
 {
       $('#mydiv').css( { 'background-image': 'url('+imgurl+')' } );
       $('#mydiv').animate( {opacity: 1} , effectDuration/2 );
 }

 function toggleImg(imgurl,effectDuration)
 {
     $('#mydiv').animate( {opacity: 0}, effectDuration/2 , callMeWhenUrDone );
 }
 //~ cheesy function
于 2013-07-10T20:23:05.383 に答える