javascript - jquery和.js中根据屏幕尺寸显示不同的图像

Question

所以，我有这段代码，并且我一直在尝试让图像随着屏幕尺寸而相应地改变。我希望它不断检查屏幕尺寸并相对变化。

这是代码:

 $(function(){

            $.mbBgndGallery.buildGallery({
                containment:"#home",
                timer:4600,
                effTimer:700,
                controls:"#controls",
                grayScale:false,
                shuffle:false,
                preserveWidth:false,
                effect:"slideLeft",
                effect:{enter:{left:"-100%",opacity:1},exit:{top:0,opacity:0}, enterTiming:"ease-in", exitTiming:"ease-in"},


                 images:[
                 "images/bb/Slider/slider-image-01.jpg",
                 "images/bb/Slider/slider-image-02.jpg",
                 "images/bb/Slider/slider-image-03.jpg",
                 "images/bb/Slider/slider-image-04.jpg",
                 "images/bb/Slider/slider-image-05.jpg"
                 ],

                onStart:function(){},
                onPause:function(){},
                onPlay:function(opt){},
                onChange:function(opt,idx){},
                onNext:function(opt){},
                onPrev:function(opt){}
            });


        });

这是检查屏幕尺寸的代码:

  var width = $(window).width(); 

  $(window).resize(function () {     

    if (width > 800){
    }       else if (width <=800){
    }

    });

每当我将图像代码粘贴到屏幕尺寸代码中时，它就会中断。给出了什么？

PS。要查看的图像的路径位于不同的文件夹路径中:

窗纱:

images:[ "images/bb/Slider/slider-image-01.jpg", "images/bb/Slider/slider-image-02.jpg", "images/bb/Slider/slider-image-03.jpg", "images/bb/Slider/slider-image-04.jpg", "images/bb/Slider/slider-image-05.jpg" ]

手机屏幕图像

images:[ "images/bb/phoneslider/slider-image-01.jpg", "images/bb/phoneslider/slider-image-02.jpg", "images/bb/phoneslider/slider-image-03.jpg", "images/bb/phoneslider/slider-image-04.jpg", "images/bb/phoneslider/slider-image-05.jpg" ]

Answer 1

文档 ( https://github.com/pupunzi/jquery.mb.bgndGallery/wiki ) 在此处描述了一种方法:myGallery.changeGallery(array)。

这允许您随意更改图库图像 - 即更改窗口的宽度...

因此，在 window.resize 方法内部，您可以调用 changeGallery 并传入屏幕尺寸的图像数组......