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

Question

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

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

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

我该如何解决这个问题？

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

我反对这一点，所以任何帮助和建议都是受欢迎的。

Answer 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;
} 

Answer 2

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

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