使用div元素與jQuery Orbit Plugin 1.2.3

我正在嘗試使用舊版本的Orbit 1.2.3，並且我正在嘗試爲幾個div製作輪播。它會像旋轉img標籤一樣旋轉。我得到它的圖像工作，但是當它涉及到的div，它只是重疊上的海誓山盟使用div元素與jQuery Orbit Plugin 1.2.3

頂部的所有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>

這表明它像下面的圖片中： enter image description here

的div元素的CSS是

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

，你可以看到，它重疊所有的div元素。 javascript做它的工作，並通過改變z-index將正確的div放在最前面。我玩過CSS，但看起來像缺少一個CSS元素。所有幫助非常感謝！謝謝

來源

2014-07-07 user3777012

我們實際上做到了這一點。你必須爲你的div添加一個背景顏色。否則你的div背景是透明的。嘗試在CSS表格或頭部中定位您的'.orbit div'，併爲div元素添加背景顏色。

所以你的CSS看起來像

.orbit div{background:white}

來源

2014-07-07 21:04:15 ClosDesign

使用div元素與jQuery Orbit Plugin 1.2.3

回答

相關問題