制作のご相談はこちら
クロスフェード用自作サンプルコード

2015年02月10日

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

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

デモはこちらです。

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);
});

デモはこちらです。

参考URL

今回素材に使用させていただいた写真はこちらのサイトを利用しています。
クオリティが素晴らしいので、よく利用しています。
http://foodiesfeed.com/