jQuery循环幻灯片调整大小问题答案

【问题标题】：jQuery cycle slideshow resize problemjQuery循环幻灯片调整大小问题
【发布时间】：2012-09-12 15:28:36
【问题描述】：

在这个页面上，我在中间有一个 100% 宽度的闪屏，它每 8 秒旋转一次图形图像。

我在这个幻灯片中有 3 个 div。主 div 包含幻灯片，内部 div 有中继器背景图像，内部 div 有渐变图像。

问题 1. 当您尝试缩小浏览器时 ....网站内容会自行调整并在左侧移动.....但是我的幻灯片内容没有...目前我没有内容，但您可以通过黑色边框看到它。幻灯片停留在中间。

我该如何解决这个问题？

问题 2. 一旦浏览器的宽度变小并且您加载此页面....幻灯片在中心呈现。现在最大化浏览器，你会看到因为幻灯片是在较小的屏幕上呈现的......它会在两侧留下空白，并且 div 不会随着浏览器调整大小。

我已经对此表示反对，因此欢迎任何帮助和建议。

【问题讨论】：

我认为您或管理员刚刚编辑了该部分...很抱歉，但情况有点绝望...谢谢

标签： jquery jquery-ui cycle jquery-cycle

【解决方案1】：

我以前从未使用过 jquery.cycle，但它会根据呈现时的初始浏览器宽度调整宽度。在调整浏览器大小时，这些宽度也没有调整，这会导致您的最终问题。

查看您的 CSS，您似乎正在尝试将 100% 的宽度直接设置为这些 div（由于 jquery.cycle 将宽度直接应用于覆盖它的元素，因此该宽度不会生效）。一个直接的解决方案是在 CSS 中 div 元素的宽度之后立即指定 !important （强制元素直接使用您的 CSS）。

例如（让我们取第一个蓝色 div）：

.fadein {
   width: 100% !important
}

.hd_splash_container_blue {
   width: 100% !important
   poisition: relative;
}

.main_blue {
   margin-left:70px;
   margin-right:70px;
   position: relative;
}

这应该允许您重新调整浏览器的大小，成功地保持内容居中。

我可能会建议在更高级别应用您的 CSS，因为每个高级别的唯一更改是图像（可以像现在一样完成）。取出其余的 CSS 并在高层次上应用它：

.hd_splash_container {
   width: 100% !important
   poisition: relative;
}

.main_color {
   margin-left:70px;
   margin-right:70px;
   position: relative;
}

【讨论】：

【解决方案2】：

我相信使用 Cycle 插件的原生选项实际上可以实现相同的效果。尝试像这样添加这些规则：

$('#slides').cycle({ 
  resizeContainer: false,
  slideResize: false
});

【讨论】：