0

我正在尝试创建一个轮播，单击任何元素都会将其向左滑动，同时将右侧元素滑动到视口中。为此，我需要将divs 并排堆叠。我正在尝试将其作为float基于布局的布局（请参阅Fiddle）。

问题是在这里单击红色的div幻灯片向左滑动，但不是向左滑动绿色元素。这可能是因为它们实际上位于另一个下方，当overflow: hidden从#cont的样式中删除时可见。如何将它们并排堆叠，以便向左滑动一个自动向左滑动下一个？（在单击时动态创建下一个元素并将其动画化到视口中是不行的，该元素应该存在于 DOM 中！）

4

5 回答 5

2

我建议您使用插件，因为这比您可能意识到的要多。有很多插件可以解决这个问题，这里有一个让你开始的列表：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);
});

最好使用 anul而不是所有 div，这至少在语义上更正确，尽管在技术上不是必需的。

<div id="carousel">
    <ul id="carouselContent">
        <li id="slide1"></li>
        <li id="slide2"></li>
        <li id="slide3"></li>
    </ul>
</div>
于 2013-01-15T20:08:10.807 回答
1

这：

#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-15T19:58:19.190 回答
0

您可以使用该轮播，您可以在其中为轮播生成 javascript http://caroufredsel.dev7studios.com/configuration-robot.php

于 2013-01-15T19:58:27.133 回答
0

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

于 2013-01-15T20:00:14.497 回答
0

您可以尝试使用列表项，并内联显示它们。

于 2013-01-15T20:00:24.990 回答