在 jQuery Orbit Plugin 1.2.3 中使用 div 元素答案

【问题标题】：using div elements with jQuery Orbit Plugin 1.2.3在 jQuery Orbit Plugin 1.2.3 中使用 div 元素
【发布时间】：2014-07-07 17:21:28
【问题描述】：

我正在尝试使用旧版本的 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 元素。非常感谢所有帮助！谢谢

【问题讨论】：

标签： jquery html css

【解决方案1】：

我们确实做到了。您必须为您的 div 添加背景颜色。否则你的 div 背景是透明的。尝试在 CSS 表或头部定位您的“.orbit div”，并为 div 元素添加背景颜色。

所以你的 CSS 看起来像

.orbit div{background:white}

【讨论】：