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

Question

在此页面上，中间有一个 100% 宽度的启动屏幕，并且每 8 秒旋转一次图形图像。

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

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

我该如何解决这个问题？

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

我对此非常反对，所以欢迎任何帮助和建议。

Answer 1

我以前从未使用过 jquery.cycle，但它会根据渲染时的初始浏览器宽度调整宽度。调整浏览器大小后，这些宽度也不会调整，这导致了最终的问题。

查看您的 CSS，您似乎正在尝试直接为这些 div 设置 100% 的宽度（这不会生效，因为 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;
} 

Answer 2

我相信使用 Cycle 插件的本机选项实际上可以实现相同的效果。尝试添加这些规则，如下所示：

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