0

背景画像を回転させるために、この素​​敵な小さな jQuery スクリプトを使用しています。

http://www.diplo.co.uk/blog/2011/2/23/simple-jquery-background-image-rotator.aspx

問題のjQueryは次のとおりです。

(function($)
{
    $.fn.extend({
        bgrotate: function(options)
        {
            var defaults = {
                delay: 1000,
                images: [],
                imagedir: "/images/"
            }

            var o = $.extend(defaults, options);
            var $obj = $(this);
            var cache = [];
            var i = 0;
            var preCache = true;

            return this.each(function()
            {
                setInterval(function() { setBack($obj, o.images, o.imagedir) }, o.delay);
            });

            function setBack(elem, backgrounds, imagedir)
            {
                elem.css("background-image", "url(" + imagedir + backgrounds[i] + ")");
                i++;
                if (i == backgrounds.length)
                {
                    i = 0;
                    preCache = false;
                }
                if (preCache)
                {
                    var cacheImage = document.createElement('img');
                    cacheImage.src = imagedir + backgrounds[i];
                    cache.push(cacheImage);
                }
            }
        }
    });
})(jQuery);

これはうまく機能しますが、画像の回転の間にフェードを追加しようとしています。

このスクリプトにフェード要素を追加する方法/場所に関するポインタまたは手がかりはありますか?

どうもありがとうデイブ

4

1 に答える 1

1

背景画像をアニメーション化できないため、新しい要素を作成して元の要素の後ろに配置し、その後、古い要素をフェードアウトする必要があります。

デモjsfiddle

要素を複製する必要があるため、body 

/* Simple jQuery background image rotator plug-in by Dan 'Diplo' Booth */
(function($)
{
    $.fn.extend({
        bgrotate: function(options)
        {
            var defaults = {
                delay: 1000,
                images: [],
                imagedir: "/images/"
            }

            var o = $.extend(defaults, options);
            var $obj = $(this);
            var cache = [];
            var i = 0;
            var preCache = true;

            return this.each(function()
            {
                setTimeout(function() { setBack($obj, o.images, o.imagedir) }, o.delay);
            });

            function setBack(elem, backgrounds, imagedir)
            {
                //elem.css("background-image", "url(" + imagedir + backgrounds[i] + ")");
                var newElement = elem.clone();
                $(newElement).css({'background-image': "url(" + imagedir + backgrounds[i] + ")"})
                $(newElement).css("position","absolute");
                $(newElement).css("top",$(elem).position().top + "px");
                $(newElement).css("left",$(elem).position().left + "px");
                $(newElement).hide();
                $(elem).prop("id", $(elem).prop("id") + "temp" + i);
                $(elem).after(newElement);
                $(newElement).fadeIn('slow', function() {
                    $(newElement).css("position",$(elem).css("position"));
                    $(newElement).css("top",$(elem).css("top"));
                    $(newElement).css("left",$(elem).css("left"));
                    $(elem).remove();
                    setTimeout(function() { setBack($(newElement), o.images, o.imagedir) }, o.delay);
                });
                i++;
                if (i == backgrounds.length)
                {
                    i = 0;
                    preCache = false;
                }
                if (preCache)
                {
                    var cacheImage = document.createElement('img');
                    cacheImage.src = imagedir + backgrounds[i];
                    cache.push(cacheImage);
                }
            }
        }
    });
})(jQuery);
于 2013-01-24T12:46:22.067 に答える