【jQuery】クロスフェード・ループスライド

JC用に。

by tea4two

HTML

<ul id="rdmSlide">
    <li><img src="http://placekitten.com/g/200/200" alt="" /></li>
    <li><img src="http://placekitten.com/200/200" alt="" /></li>
    <li><img src="http://placekitten.com/g/190/180" alt="" /></li>
</ul>

CSS

ul#rdmSlide {
    width: 200px;
    height: 200px;
    position: relative;
}
li {
    display:none;
    position: absolute;
    top: 0; left: 0;
    width: 200px;
    height: 200px;
}
li:first-child {
    background-color: #f00;
    z-index: 100;
}
li:nth-child(2){
    background-color: green;
}
li:last-child {
    background-color: yellow;
}

JavaScript

//==================================
//クロスフェード・ループスライド
//Author: Norihiro Tsutae
//Date: 2012-12-20
//==================================
$(function(){
    
    //設定（ここの記述は元の$(functionに書き写して使ってください。)
    var timer = 2000;//止める秒数(ミリ秒)をここにセットしてください。
    var bnset = $('#rdmSlide');//ULのIDなり、CLASS
    
    bnStart(timer,bnset);
    
});
function bnStart(timer,bnset) {
    var child = bnset.children();
    var leng = child.length;
    var fc = child.first();
    fc.css({display:'block',zIndex:100});
    
    var i = 0;
    
    function looper(i){
        setTimeout(function(){
            if(i < (leng-1)) {
                child.eq(i).next().css('display','block');
                child.eq(i).fadeOut('normal',function(){
                    $(this).css('z-index','0');
                    $(this).next().css('z-index','100');
                });
                i++;
                looper(i);
    
            } else if (i == (leng-1)) {
                fc.css('display','block');
                child.eq(i).fadeOut('normal',function(){
                    $(this).css('z-index','0');
                    fc.css('z-index','100');
                });
                i = 0;
                looper(i);
            }
        },timer);
    };
    looper(i);
};


//クロスフェード・ループスライド
//==================================