Question

我正在尝试创建一个旋转木马，点击任何元素将向左滑动，同时将右侧元素滑入视口。为此，我需要将div并排堆叠。我正在尝试将其作为基于float的布局（请参阅Fiddle）。

问题在于，点击红色div会向左滑动，但不会向左滑动绿色元素。这可能是由于它们实际上位于另一个之下，当overflow: hidden从#cont的样式中移除时可见。如何将它们并排堆叠，以便向左滑动一个自动滑动下一个向左？（在点击动画时动态创建下一个元素并将其设置为视口是一个禁忌，元素应该出现在DOM中！）

Answer 1

我建议您使用插件，因为除此之外您还可以了解更多内容。这里有很多插件，这里有一个列表可以帮助您入门：http://www.tripwiremagazine.com/2012/12/jquery-carousel.html

我修改了你的Javascript，HTML和CSS，让你指向正确的方向：
http://jsfiddle.net/nf5Dh/2/

您需要一个绝对定位的容器contContent，并且容器在容器div中移动。您只需将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>

Answer 2

此：

#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;
}

Answer 3

你可以使用那个轮播，在那里你可以为轮播生成javascript http://caroufredsel.dev7studios.com/configuration-robot.php

Answer 4

我过去曾使用http://sorgalla.com/jcarousel/这样的事情，这是基于postion：相对和左/右偏移。可能比弄乱花车更容易。

Answer 5

您可以尝试使用列表项，并将其显示为内联。

如何将div彼此叠加以创建旋转木马

5 个答案: