jQuery循環幻燈片調整大小問題

在這個頁面上，我在中間有一個100％寬度的閃屏，它每8秒旋轉圖形圖像。jQuery循環幻燈片調整大小問題

我在這個幻燈片裏面有3個div。主div包含幻燈片，內部div有中繼器背景圖像和內部div有梯度圖像。

問題1：當您嘗試使瀏覽器變小....網站內容調整自己，並在左側移動.....但是我的幻燈片內容不......目前我沒有內容，但你可以通過黑色邊框看到。幻燈片放在中間。

我該如何解決這個問題？

問題2：一旦瀏覽器的寬度變小，並且您加載此頁面......幻燈片將呈現在中心。現在最大化瀏覽器，你會看到，因爲幻燈片顯示在較小的屏幕上....它會留下空白的側面和div不會調整與瀏覽器。

我對這件事表示反對，所以任何幫助和建議都是值得歡迎的。

來源

2010-07-17 Zeus

我認爲您或管理員剛纔編輯的那部分......我們對此深感抱歉，但情況是那種絕望...謝謝 – Zeus 2010-07-17 20:34:18

我從來沒有使用過jquery.cycle，但它在呈現時根據初始瀏覽器寬度調整寬度。在調整瀏覽器大小時，這些寬度也不會被調整，這會導致您的最終問題。

查看你的CSS，看起來你試圖設置一個100％的寬度直接給這些div（這不會影響，因爲jquery.cycle直接將寬度應用到元素覆蓋它）。一個直接的解決方案是在你的CSS中的div元素的寬度後立即指定！（強制元素直接使用你的CSS）。

例如（讓我們第一藍格）：

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

來源

2010-07-17 21:24:58 rickp

我可以抱抱你......？ – Zeus 2010-07-17 21:40:59

哈哈很高興我可以幫忙！ – rickp 2010-07-17 21:45:51

這很酷....學習了一件關於重要性的新東西！重要的 – Zeus 2010-07-17 21:52:27

我相信同樣的影響，則實際使用週期插件的原始選項來實現。嘗試添加這些規則，像這樣：

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

來源

2012-09-12 07:28:36 internetross

jQuery循環幻燈片調整大小問題

回答

相關問題