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，您会注意到两件事：

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 时初始化幻灯片放映，这将为您提供所需的行为。

Answer 2

试试这个：

var sizes = [720, 1024, 1280, 1440, 1920];

function slidesForScreenSize(size) {
    return $.map([1, 2, 3], function (n) {
        return {
            src: 'images/bg-slider/' + size + '-' + n + '.jpg',
            fade: 1000
        }
    });

}

$(function () {
    var width = $(window).width();
    if (width > 480) {
        for (var i = 0; i < sizes.length; i++) {
            if (width <= sizes[i]) {
                $('body').vegas({
                    slides: slidesForScreenSize(sizes[i])
                });
                break;
            }
        }
    }
});

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

Different background src based on width size in javascript?

javascript

css

jquery

slider