javascript - 一連の画像のjquery自動fadeInfadeOut？

Question

私は基本的に、5秒ほどで画像がフェードインおよびフェードアウトするスライドショーを作成しようとしています。スライドショーは、並べてではなく、互いに積み重ねられた一連の画像を示しています。5秒後にimg1フェードアウトとimg2フェードインを作成し、さらに5秒後にimg2フェードアウトとimg3フェードインを作成するにはどうすればよいですか？

setInterval（）関数の使用を考えていましたが、どのように機能するのかわかりません。多分delay（）？

Answer 1

プラグインは必要ありません。数行のコードでそれを行うのは非常に簡単です。

HTML

    <div id="images">
    <ul
        ><li><img src="img/11.jpg" width="520" height="203" alt="" /></li
        ><li><img src="img/12.jpg" width="520" height="203" alt="" /></li
        ><li><img src="img/13.jpg" width="520" height="203" alt="" /></li
        ><li><img src="img/14.jpg" width="520" height="203" alt="" /></li
        ><li><img src="img/15.jpg" width="520" height="203" alt="" /></li
        ><li><img src="img/5.jpg" width="520" height="203" alt="" /></li
    ></ul>
</div>

CSS

#images ul{position:absolute;right:9px;top:1px;width:520px;height:202px;list-style:none;overflow:hidden}
#images li{display:none;position:absolute;left:0;top:0;}

JS

$(document).ready(
  function() {
    var i = 0, j = 0; 
    var imgs = $('#header ul').children();
    runIt(imgs);

    function runIt() {
      $(imgs).eq(i).fadeIn(3000, function() {
        setTimeout(runIt,'200');
      });
      i = i + 1; 
      if (i == imgs.length) {
        i = 0; $('#images li').fadeOut(1000)
      } 
    }
});

Answer 2

これを行うプラグインを使用してみませんか？サイクルを含めて、そこにはたくさんあります

Answer 3

スライスギャラリーにフェードインとフェードアウトを使用しようとしたときに、IEで問題が発生しました。私はjqueryライブラリ「http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js」を使用していました。「 http://code.jquery.com/jquery-1.9.1.js 」ライブラリに変更すると、IE、Chrome、FFですべて問題なく、すべての変更をスキップできました。