jQuery循环幻灯片大小调整问题 [英] jQuery cycle slideshow resize problem

问题描述

在此页面的中间，有一个初始屏幕，其宽度为100％，每8秒旋转一次图形图像.

On this page I have a splash screen in the middle which is 100% width and it rotates graphical images every 8 sec.

此幻灯片显示我有3格.主div包含幻灯片，内部div具有中继器背景图像，内部div具有渐变图像.

I have 3 div inside this slideshow. Main div contains the slideshow , internal div has repeater background image and internal div inside that has gradient image.

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

Problem 1. When you try to make the browser smaller ....website content adjust themselves and shifts on the left side.....however my slideshow content does not...currently I do not have content in it but you can see this by the black border. Slideshow stays in the middle.

我该如何解决?

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

Problem 2. Once the browser is smaller in width and you load this page....slideshow renders in the center. Now maximize the browser ,you will see the because slideshow was rendered in the smaller screen....it will leave white space on the sides and div wont resize with the browser.

我对此表示震惊，因此欢迎您提供任何帮助和建议.

I have banged my head against this so any help and suggestion is welcome.

推荐答案

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

I've never used jquery.cycle before, but its adjusting your width based on the initial browser width when it renders. Upon resizing the browser, these widths are not being adjusted either, which is causing your ultimate problem.

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

Viewing your CSS, it appears you're trying to set a width of 100% directly to these divs (which is not taking affect since jquery.cycle is applying a width directly to the element overriding it). An immediate solution is specifying !important immediately following your widths on the div elements in your CSS (enforcing that the elements use your CSS directly).

例如(让我们采用第一个蓝色div):

For example (lets take the first blue div):

.fadein {
   width: 100% !important
}

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

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

这应该使您能够成功地重新调整浏览器的大小，并根据需要将内容居中.

This should allow you to re-size the browser successfully keeping the contents centered as desired.

我可能建议在更高级别上应用CSS，因为每个高级之间的唯一变化就是图像(现在可以完成).取出其余的CSS并在更高层次上应用它:

I might suggest applying your CSS at a higher level, since the only changes between each high level is the image (which can be done as it is now). Take the rest of the CSS out and apply it at a high level:

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

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

这篇关于jQuery循环幻灯片大小调整问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！