使 Jquery Cycle 在动态 xhtml 布局中工作答案

【问题标题】：Making Jquery Cycle work within a dynamic xhtml layout使 Jquery Cycle 在动态 xhtml 布局中工作
【发布时间】：2011-12-20 08:40:40
【问题描述】：

您好，我正在尝试使用 Particle tree method 为我的页面运行 javascript 调整大小 - 每当窗口分辨率改变时，就会调用不同的 CSS 样式表。

在每个样式表（default.css/thin.css/wide.css/wider.css）中，我更改了循环幻灯片的尺寸和图像的尺寸。

Previous posts建议循环存储元素的宽度和高度一次。我已尝试解决此问题：

$(document).ready(function() {  
$('.slideshow')  
.after('<div id="nav">')  
.cycle({  
        fx: 'fade',  
        sync: true,  
                speedIn:  500,  
        speedOut:  500,  
        timeout: 10000,  
        pager:  '#nav',  
        next:   '.slideshow'  
                cssBefore: {  
                width: imagewidth,    
                height: imageheight  
}    

    });
});

这对我不起作用...我也尝试过 containerResize: false;这是分配的情况！ css 样式表中的重要规则？

感谢您的帮助！完整网站代码here

【问题讨论】：

标签： jquery resize slideshow cycle jquery-cycle

【解决方案1】：

根据您的目标浏览器，您也许可以对媒体查询（响应式设计）执行相同的操作。通过在 CSS 中指定尺寸，可以应用不同的样式。看 http://www.alistapart.com/articles/responsive-web-design/了解详情。

【讨论】：

感谢这是使用 css 而不是 javascript 创建灵活图像的更简单方法。我可以很容易地用图像来实现这一点，但我的主要问题是循环幻灯片，让它规模化有点棘手。高度和宽度值被存储并且不适应，我想我需要修改 Cycle 选项，这样就不会发生这种情况......对此有什么建议吗？