使用div元素与jQuery Orbit Plugin 1.2.3

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背景是透明的。尝试定位您的＆＃39; .orbit div＆＃39;在CSS工作表或头部中，并为div元素添加背景颜色。

所以你看起来像CSS

.orbit div{background:white}