0

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

});
4

1 に答える 1

0

問題は 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);
        });
    });
 };

});
于 2012-08-18T12:49:22.957 に答える