在jQuery Orbit Plugin 1.2.3中使用div元素

Question

我正在嘗試使用舊版本的Orbit 1.2.3，並且正在嘗試為幾個div制作輪播。 它會像旋轉img標簽一樣旋轉。 我把它用於圖像，但是當涉及到div時，它只是將所有div元素彼此重疊

JavaScript是：

function onRecommendationPageletLayout() {
$(document).ready(function() {
    jQuery('#awsmp-hero-featureSwap').show().orbit({
        animation : 'vertical-slide',
        animationSpeed : 0,
        advanceSpeed : 5500,
        pauseOnHover : true,
        directionalNav : true,
        captions : false,
        bullets : true,
        timer : false
    });
});
}

圖像的代碼如下，並且可以正常工作：

<div id="awsmp-hero-featureSwap">
<img
    src="https://images-na.ssl-images-amazon.com/images/G/01/AWSMP/en_US/images/aiscaler-dynamic-site-img-logo.jpg"
    alt="Overflow: Hidden No More" /> <img
    src="https://images-na.ssl-images-amazon.com/images/G/01/AWSMP/en_US/images/a-ten-networks-vthunder-img.jpg"
    alt="HTML Captions" /> <img
    src="https://images-na.ssl-images-amazon.com/images/G/01/AWSMP/en_US/images/vyatta-virtual-router-img-logo.jpg"
    alt="and more features" />
</div>

但是，當涉及div元素時，它不會應用輪播，並且會覆蓋所有div元素：

<div id="awsmp-hero-featureSwap">
    <div>some content here</div>
    <div>more content here</div>
    <div>this is the 3rd slide</div>
</div>

如下圖所示：

div元素的CSS是

style="z-index: 1; 
display: block; 
top: 0px;"

如您所見，它與所有div元素重疊。 javascript會執行其工作，並通過更改z-index將正確的div放在頂部。 我玩過CSS，但似乎缺少一個CSS元素。 非常感謝所有幫助！ 謝謝

Answer 1

我們實際上是這樣做的。 您必須為div添加背景色。 否則，您的div背景是透明的。 嘗試在CSS片或頭瞄准你的“.orbit DIV”，並添加一個背景顏色的div元素。

所以你的CSS看起來像

.orbit div{background:white}