Question

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

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

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);
        });
    });
 };

});

背景图像幻灯片

1 个答案: