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

我想根据屏幕的宽度获得不同的背景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 }
            ]
        }
})();
});

最佳答案

如果查看Vegas的documentation，您会注意到两件事：


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


在您提供的代码中，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时，我们才初始化幻灯片放映，从而为您提供所需的行为。

关于javascript - 基于javascript中宽度大小的不同背景src？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32130192/