jquery - 背景图像幻灯片

Question

我刚刚发现了 CSS3background-size:cover属性。现在我想用幻灯片（例如jQuery循环）替换这个背景图像，而不会丢失浏览器完成的自动缩放。有一个简单的解决方案吗？

我找到了这个答案，它可能包含一个解决方案，但我不太确定如何调整它。我试图复制并粘贴下面的代码，但没有任何循环......

jQuery.noConflict();

jQuery(document).ready(function($) {
    $(function() {
        $("#home").loadBGImage();
        setInterval('$("#home").loadBGImage()', 5000); 
    });

    $.fn.loadBGImage = function() {
        var images = ["background1.jpg",
        "background2.jpg",
        "background3.jpg",
        "background4.jpg" ];

        var image = images[Math.floor(Math.random() * images.length)];

        return this.each(function() {
            var $obj = $(this);
            $obj.fadeOut(500,function() {
                $obj.css('background', 'url(../images/' + image + ')')
                    .fadeIn(500);
            });
        });
    };

});

Answer 1

好吧，问题是你使用了 jQuery.noConflict(); 所以在这种情况下，所有的 $ 都必须用 jQuery 替换，如下所示

jQuery.noConflict();

jQuery(document).ready(function(jQuery) {
 jQuery(function() {
    jQuery("#home").loadBGImage();
    setInterval('jQuery("#home").loadBGImage()', 5000); 
 });

 jQuery.fn.loadBGImage = function() {
    var images = ["background1.jpg",
    "background2.jpg",
    "background3.jpg",
    "background4.jpg" ];

    var image = images[Math.floor(Math.random() * images.length)];

    return this.each(function() {
        var $obj = jQuery(this);
        $obj.fadeOut(500,function() {
            $obj.css('background', 'url(../images/' + image + ')').fadeIn(500);
        });
    });
 };

});