如何將div彼此堆疊以創建旋轉木馬

我想創建一個旋轉木馬，點擊任何元素將向左滑動它，同時將正確元素滑入視口。爲此，我需要並排堆疊div。我正在嘗試將其作爲基於float的佈局（請參閱Fiddle）。如何將div彼此堆疊以創建旋轉木馬

問題在於，此處單擊紅色div可向左滑動，但不向左滑動綠色元件。這可能是由於它們實際上處於另一個之下，如overflow: hidden從#cont的風格中刪除時可見。如何選擇將它們並排堆放，以便將一個向左滑動時自動將下一個向左滑動？（動態創建的，以待下一個元素的同時單擊並動畫成視是一個禁忌，應將元素存在於DOM！）

來源

2013-01-15 SexyBeast

我可以用[谷歌圖表示例]（http://jsfiddle.net/JSwth/）幫助您處理彼此相鄰的div事物。我的例子的關鍵部分是容器。 – BrOSs

我建議你使用一個插件，因爲這比你可能意識到的要多。有許多插件在那裏對於這一點，這裏有一個列表，讓你開始：http://www.tripwiremagazine.com/2012/12/jquery-carousel.html

我修改你的Javascript，HTML和CSS，讓你在正確的方向指出：
http://jsfiddle.net/nf5Dh/2/

你需要一個容器contContent，絕對定位，並且該容器在容器格內移動。您只需將元素浮動到contContent以使它們彼此相鄰。

HTML：

<div id='cont'> 
    <div id="contContent"> 
     <div id='i1'></div> 
     <div id='i2'></div> 
     <div id='i3'></div> 
    </div> 
</div>

CSS：

#cont { 
    width: 50px; 
    padding-top: 10px; 
    background: blue; 
    height: 50px; 
    overflow: hidden; 
    position: relative; 
} 
#contContent { 
    height: 50px; 
    width: 150px; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
#contContent > div { 
    float: left; 
    display: inline-block; 
    height: 50px; 
    width: 50px; 
} 
#i1 { background: red; } 
#i2 { background: green; } 
#i3 { background: yellow; }

而且JS：

$("#contContent > div").click(function(){ 
    $("#contContent").animate({left: "-=50px"},1000); 
});

你可能會更好使用ul而不是所有的div，這是至少在語義上是正確的，儘管在技術上不是必要的。

<div id="carousel"> 
    <ul id="carouselContent"> 
     <li id="slide1"></li> 
     <li id="slide2"></li> 
     <li id="slide3"></li> 
    </ul> 
</div>

來源

2013-01-15 20:08:10 matthewpavkov

對。絕對定位確實看起來是最好的解決方案.. – SexyBeast

奇怪。仍然不工作：http://jsfiddle.net/Cupidvogel/DUvY4/ – SexyBeast

這是錯誤的jsfiddle。這是正確的：http://jsfiddle.net/nf5Dh/2/ – matthewpavkov

此：

#cont { 
    white-space:nowrap; 
    overflow: hidden; 
} 

.pane { // or whatever the slide divs are called. get rid of the float. 
    float: none; 
    display: inline-block; 
    *zoom:1; 
    *display:inline; 
}

來源

2013-01-15 19:58:19 circusdei

請'HTML'？我無法做任何事情！ – SexyBeast

你不能指望人們爲你寫一切，這不是這個網站的目的。 – sellmeadog

#cont＃平臺.pane .pane .pane /＃platform /＃cont - 動畫＃平臺。 – circusdei

你可以使用該旋轉木馬，您可以生成旋轉木馬的JavaScript http://caroufredsel.dev7studios.com/configuration-robot.php

來源

2013-01-15 19:58:27

不，我需要做相當程度的定製，所以我不能依靠第三方應用程序... – SexyBeast

我已經使用http://sorgalla.com/jcarousel/這樣的事情在過去，這是基於位置：相對和左/右偏移。可能比弄亂花車更容易。

來源

2013-01-15 20:00:14 Gereon

您可以嘗試使用列表項，並將它們內聯顯示。

來源

2013-01-15 20:00:24 tahdhaze09

請您詳細說明一下嗎？ – SexyBeast

如何將div彼此堆疊以創建旋轉木馬

回答

相關問題