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