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。要查看的图像的路径位于不同的文件夹路径中：

窗口屏幕：

图像： “图像/ BB /滑块/滑块图像01.JPG”， “图像/ BB /滑块/滑块图像02.JPG”， “图像/ BB /滑块/滑块图像03.jpg”， “图像/ BB /滑块/滑块图像04.jpg”， “图像/ BB /滑块/滑块图像05.jpg” ]

手机屏幕图像

图像： “图像/ BB / phoneslider /滑块图像01.JPG”， “图像/ BB / phoneslider /滑块图像02.JPG”， “图像/ BB / phoneslider /滑块图像03.jpg”， “图像/ BB / phoneslider /滑块图像04.jpg”， “图像/ BB / phoneslider /滑块图像05.jpg” ]

Answer 1

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

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

因此，在window.resize方法中，您可以调用changeGallery并传入屏幕大小的图像数组....

Answer 2

感谢您的回复，您的回答非常有帮助。但是，我相信我做错了，因为我打破了一切......

这是代码的最新更新

我已将 $（window）.resize（function（）{..}）添加到 $（function（）{..}）中< em> myGallery ，图片仍无处可见。在我更改之前，myGallery之前被定义为 $ .mbBggGallery.buildGallery 。

这就是它现在的样子：

  $(function(){

    myGallery = new mbBgndGallery({
            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"},

            // If your server allow directory listing you can use:
            // (however this doesn't work locally on your computer)

            //folderPath:"testImage/",

            // else:

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

    $(window).resize(function () {     

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

        if (width > 800){

            var windowarray=[“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”];

        myGallery.changeGallery(windowarray);
    }
        else if (width <=800){

            var phonearray=[“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”];

        myGallery.changeGallery(phonearray);
    }

    });

    });

当然我做错了，因为我从未替换过函数中的图像。我为这些noobie错误道歉，我很新。

根据jquery和.js中的屏幕大小显示不同的图像

2 个答案: