jQuery 画像をクロスフェード

画像をクロスフェードするだけのシンプルなバナーが作りたくて、クロスフェードのやり方を調べました。
なるほど、背景画像にした要素を同時にフェードインとフェードアウトしているんですね～

【Javascript】li要素をクロスフェードするシンプルなjQueryプラグインをつくりました | Wood-Roots:blog

li要素をクロスフェードするだけのシンプルなプラグインをつくりました。画像とテキストが混じった状態でも順番にフェードイン・フェードアウトを繰り返します。DEMOはこちらダウンロードもともとプラグインではなくベタに書いてとある案件で使ったのです...

wood-roots.com

wood-roots.com様の crossfade.jsを改変して使わせていただきました。ありがとうございます！！

(function ($) {
    $.fn.crossfade = function (config) {
        let defaults = {
            txt: 'slide_text',
            w: '720px',
            h: '480px'
        }
        $.extend(defaults, config);
        return this.each(function () {
            $(this).css({
                position: 'relative',
                overflow: 'hidden',
                width: defaults.w,
                height: defaults.h
            }).children('li').css({
                position: 'absolute',
                left: '0',
                top: '0',
                overflow: 'hidden',
                width: defaults.w,
                height: defaults.h
            }).end().hide();
            $(this).children('li').each(function (key, value) {
                if (!$(this).hasClass(defaults.txt)) {
                    let img = $(this).find('img').attr('src');
                    let href = $(this).find('a').attr('href');
                    if (href) {
                        $(this).attr('data-link', href).css('cursor', 'pointer');
                    }
                    $(this).css({
                        background: 'url(' + img + ') no-repeat center center / contain'
                    }).empty().on('click', function () {
                        if ($(this).attr('data-link')) {
                            location.href = $(this).attr('data-link');
                        }
                    });
                }
            });
            $(this).fadeIn(2000).children('li').not(':first').hide();
            obj = $(this);
            i = 0;
            let timer;
            function times(obj) {
                return setInterval(function () {
                    let cnt = $(obj).children('li').length;
                    let next = (i + 1 < cnt) ? i + 1 : 0;
                    $(obj).children('li').eq(i).fadeOut(6000);
                    $(obj).children('li').eq(next).delay(1000).fadeIn(4000);
                    i = next;

                }, 8000);
            }
            timer = times(obj);
            $(window).bind("focus", function () {
                timer = times(obj);
            }).bind("blur", function () {
                clearInterval(timer);
            });
            if (parent.window) {
                $(parent.window).bind("focus", function () {
                    timer = times(obj);
                }).bind("blur", function () {
                    clearInterval(timer);
                });
            }
        });
    };
})(jQuery);

変更点は、jQueryのsize()が使えなくなったので、lengthに変えたのと、背景画像のサイズをcontainにして、枠内に収まるようにしました。また、別のタブを表示しているときに、インターバルのキューが溜まり、再表示時に画像が乱れることが気になったので、windowのfocusをバインドして、フォーカスのない時にクロスフェードをストップさせています。
また、今回の用途は、iframe内で使うことが多いので、親のparent.windowのフォーカスにもバインドさせました。