【jQuery】クロスフェード用自作サンプルコード

この記事は2015年2月10日に書かれたもので、内容が古い可能性がありますのでご注意ください。

クロスフェードは複数の画像を重ねて透過させてスライドのように見せる機能です。
とてもシンプルで簡単に設置可能なので、ぜひお試しください。
デモはこちらです。
DEMO

HTML

<ul id="crossfade">
   <li><img src="main_1.jpg" alt="" width="100%" /></li>
   <li><img src="main_2.jpg" alt="" width="100%" /></li>
   <li><img src="main_3.jpg" alt="" width="100%" /></li>
</ul>

widthを100%にするとレスポンシブ対応になります。

JQuery

$(function(){
        $("#crossfade").find("li").hide();
        $("#crossfade").find("li:first").stop().fadeIn(1000);
        
        setInterval(function(){
                $("#crossfade").find("li:first-child").fadeOut(1000)
                .next("li").fadeIn(1000)
                .end().appendTo("#crossfade");
        }, 3000);
});

デモはこちらです。
DEMO