javascript - jQuery插件在window.resize后停止正常工作，但在整页刷新后运行良好

Question

我在我的页面中实现了一个 jquery 轮播。因为我使用的是百分比单位而不是固定单位，所以我需要在调整窗口大小后重新绘制轮播。

我的问题是轮播停止正常工作并且它的函数调用不正常并且在使用以下代码调整大小后奇怪地呈现轮播：

jQuery(document).ready(function ($) {
                FnUpdateCarousel();                                                                                         
            }); // end ready    

            var lightbox_resize = false;
            $(window).resize(function() {
                if (lightbox_resize)
                    clearTimeout(lightbox_resize);
                lightbox_resize = setTimeout(function() {
                    FnUpdateCarousel(); 
                }, 100);
            });                                         

            function FnUpdateCarousel() {
                    var widthof = 
                    Math.round(parseInt(jQuery('#services-example-1').css('width'))-(45));
                    jQuery('#services-example-1').services(
                        {
                            width:widthof,
                            height:290,
                            slideAmount:6,
                            slideSpacing:30,
                            touchenabled:"on",
                            mouseWheel:"on",
                            hoverAlpha:"off",
                            slideshow:3000,
                            hovereffect:"off"
                        });
                };

请指导我如何使其正常运行。

Answer 1

这是我达到的解决方案：

<script type="text/javascript">
            var initialContent = jQuery('#services-example-1').html();
            jQuery(document).ready(function ($) {
                FnUpdateCarousel();                                                                                         
            }); // end ready    

            var lightbox_resize = false;
            $(window).resize(function() {
                if (lightbox_resize)
                    clearTimeout(lightbox_resize);
                lightbox_resize = setTimeout(function() {
                    jQuery('#services-example-1').empty();
                    jQuery('#services-example-1').html(initialContent);
                    FnUpdateCarousel();
                }, 200);
            });                                         

            function FnUpdateCarousel() {
                    var widthof = 
                    Math.round(parseInt(jQuery('#services-example-1').css('width'))-(45));
                    jQuery('#services-example-1').services(
                        {
                            width:widthof,
                            height:290,
                            slideAmount:6,
                            slideSpacing:30,
                            touchenabled:"on",
                            mouseWheel:"on",
                            hoverAlpha:"off",
                            slideshow:3000,
                            hovereffect:"off"
                        });
                };
            </script>