在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}