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

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

查看您的CSS时,似乎您正试图将宽度直接设置为100%给这些div(由于jquery.cycle将宽度直接应用于覆盖它的元素,因此该设置不起作用)。一个直接的解决办法是指定!在CSS中的div元素上紧跟宽度(强制元素直接使用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;
} 

我相信同样的效果实际上可以通过使用Cycle插件的本机选项来实现。尝试添加以下规则:

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