1

単一の HTML ページで複数の div 内の画像をフェードイン/フェードアウトできる関数を 1 つ作成しようとしています。Div 内の画像は、各 Div から同時にフェードインする必要があります。次にフェードアウトし、div 内の次の画像が続きます。各divでミニ画像回転プレゼンテーションを作成するようなものです。

これに頭を悩ませることはできません:)ページに関数がなくても簡単にこれを実現できますが、ページに必要な数のdivを簡単に繰り返すことができるものが必要です。誰かが私を教育してくれませんか:) 提案を事前にありがとう、私はこれをオンラインで見つけることができませんでした.

例

function imageRotationFunction(var1, var2, var3) {
   //logic I need help with
}

.

imageRotationFunction(<array of ID's to fade>, <number of seconds to fade in>, <number of seconds between fades>);

HTML ページの内容:

<div id='fadein0'>
  <img class='imageRotation' src='someimage0.png'>
  <img class='imageRotation' src='someimage1.png'>
  <img class='imageRotation' src='someimage2.png'>
  <img class='imageRotation' src='someimage3.png'>
</div>

<div id='fadein1'>
  <img class='imageRotation' src='otherimage0.png'>
  <img class='imageRotation' src='otherimage1.png'>
  <img class='imageRotation' src='otherimage2.png'>
  <img class='imageRotation' src='otherimage3.png'>
</div>
4

1 に答える 1

1

次のようなことを試してください：

HTML:

<div class="fadebox">
  <img src="image0.png" />
  <img src="image1.png" />
  <img src="image2.png" />
  <img src="image3.png" />
</div>
<div class="fadebox">
  <img src="image0.png" />
  <img src="image1.png" />
  <img src="image2.png" />
  <img src="image3.png" />
</div>

CSS:

.fadebox {
    position:relative;
}
.fadebox>img {
    position:absolute;
    left:0; top:0;
    opacity:0;
    transition:opacity 1s linear;
    -webkit-transition:opacity 1s linear;
}
.fadebox>img:first-child {
    position:static;
}

JavaScript:

(function() {
    var divs = document.querySelectorAll(".fadebox"), l = divs.length, i;
    for( i=0; i<l; i++) {
        (function(div) {
            var imgs = div.children, l = imgs.length, i = -1,
                step = function() {
                    if(i > -1) imgs[i].style.opacity = 0;
                    i = (i+1)%l;
                    imgs[i].style.opacity = 1;
                };
            step();
            setInterval(step,5000);
        })(divs[i]);
    }
})();

上記で、1sはフェードが発生するのにかかる時間、 はフェード5000間のミリ秒数です (遷移を含むため、この場合、画像は 4 秒間表示されたままになります)

これは、次のように、サポートしているブラウザーでのみ機能することに注意してください。

  • IE、Chrome、Firefox は最新バージョンで問題なく動作するはずです
  • IE9 は動作しますが、画像間でフェードしません
  • IE8以下は非対応のため動作しませんopacity
  • IE7以下は非対応のため動作しませんquerySelectorAll

filter最後の 2 つのケースは、適切なスタイル (IE8) とシミングquerySelectorAll(IE7 以下)を追加することで修正できます。

于 2013-02-18T01:57:06.227 に答える