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>

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

1 个答案: