javascript - 基于javascript中宽度大小的不同背景src？

Question

我想根据屏幕的宽度获得不同的背景scr。我该怎么做呢？另外，我可以禁用小于 480 像素的屏幕的功能吗？以下代码似乎不起作用

$(window).ready(function() {
'use strict';
$.vegas('slideshow', {
        if ($(window).width() <= 480) {
            /* How to disable this fuction for resolution smaller than 480 ??? */
        } 
        else if ($(window).width() <= 720) {
            backgrounds:[
                { src:'images/bg-slider/720-1.jpg', fade:1000 },
                { src:'images/bg-slider/720-2.jpg', fade:1000 },
                { src:'images/bg-slider/720-3.jpg', fade:1000 }
            ]
        }
        else if ($(window).width() <= 1024) {
            backgrounds:[
                { src:'images/bg-slider/1024-1.jpg', fade:1000 },
                { src:'images/bg-slider/1024-2.jpg', fade:1000 },
                { src:'images/bg-slider/1024-3.jpg', fade:1000 }
            ]
        }
        else if ($(window).width() <= 1280) {
            backgrounds:[
                { src:'images/bg-slider/1280-1.jpg', fade:1000 },
                { src:'images/bg-slider/1280-2.jpg', fade:1000 },
                { src:'images/bg-slider/1280-3.jpg', fade:1000 }
            ]
        }
        else if ($(window).width() <= 1440) {
            backgrounds:[
                { src:'images/bg-slider/1440-1.jpg', fade:1000 },
                { src:'images/bg-slider/1440-2.jpg', fade:1000 },
                { src:'images/bg-slider/1440-3.jpg', fade:1000 }
            ]
        }
        else if ($(window).width() <= 1920) {
            backgrounds:[
                { src:'images/bg-slider/1920-1.jpg', fade:1000 },
                { src:'images/bg-slider/1920-2.jpg', fade:1000 },
                { src:'images/bg-slider/1920-3.jpg', fade:1000 }
            ]
        }
})();
});

Answer 1

如果您查看 documentation对于维加斯，您会注意到两件事:

1. vegas 应该在元素上调用
2. 传递给方法的选项是一个对象

在您提供的代码中，if 语句的位置在句法上不正确(它期望对象的 key: value 对开始和结束花括号)，但我们可以做这样的事情:

$(window).ready(function() {
    'use strict';
    var slides;
    var width = $(window).width();
    if (width <= 480) {
        // Do nothing, skip.
    }
    else if (width <= 720) {
        slides = [
            { src:'images/bg-slider/720-1.jpg', fade:1000 },
            { src:'images/bg-slider/720-2.jpg', fade:1000 },
            { src:'images/bg-slider/720-3.jpg', fade:1000 }
        ];
    }
    else if (width <= 1024) {
        slides = [
            { src:'images/bg-slider/1024-1.jpg', fade:1000 },
            { src:'images/bg-slider/1024-2.jpg', fade:1000 },
            { src:'images/bg-slider/1024-3.jpg', fade:1000 }
        ];
    }
    else if (width <= 1280) {
        slides = [
            { src:'images/bg-slider/1280-1.jpg', fade:1000 },
            { src:'images/bg-slider/1280-2.jpg', fade:1000 },
            { src:'images/bg-slider/1280-3.jpg', fade:1000 }
        ];
    }
    else if (width <= 1440) {
        slides = [
            { src:'images/bg-slider/1440-1.jpg', fade:1000 },
            { src:'images/bg-slider/1440-2.jpg', fade:1000 },
            { src:'images/bg-slider/1440-3.jpg', fade:1000 }
        ];
    }
    else if (width <= 1920) {
        slides = [
            { src:'images/bg-slider/1920-1.jpg', fade:1000 },
            { src:'images/bg-slider/1920-2.jpg', fade:1000 },
            { src:'images/bg-slider/1920-3.jpg', fade:1000 }
        ];
    }
    if (slides) {
        $("#slideshow").vegas('slideshow', {
            slides: slides
        });
    } else {
        // Window width too big or small.
    }
});

请注意，我们仅在设置了 slides 时才初始化幻灯片放映，这将为您提供所需的行为。