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 回答