0

カルーセルを作成しようとしています。要素をクリックすると左にスライドし、同時に右の要素がビューポートにスライドします。そのためには、 をdiv並べて積み重ねる必要があります。floatベースのレイアウトとして試しています（ Fiddleを参照）。

問題は、ここで赤い色をクリックするdivと左にスライドしますが、緑の要素は左にスライドしないことです。これはおそらく、 がのスタイルoverflow: hiddenから削除されたときに表示されるように、実際には別の下にあるという事実によるものです。#cont1 つ左にスライドすると、次のスライドも自動的に左にスライドするように、それらを並べてスタックするにはどうすればよいでしょうか。(クリックしてビューポートにアニメーション化しながら、その場で次の要素を作成することはできません。要素は DOM に存在する必要があります!)

4

5 に答える 5

2

プラグインを使用することをお勧めします。これには、理解できる以上のことがあるからです。これには多くのプラグインがあります。ここにリストがあります: http://www.tripwiremagazine.com/2012/12/jquery-carousel.html

Javascript、HTML、および CSS を修正して、正しい方向を示すようにしました:
http://jsfiddle.net/nf5Dh/2/

絶対に配置された container が必要であり、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);
});

おそらく、すべての div の代わりにan を使用した方がよいでしょうul。これは、技術的には必要ではありませんが、少なくとも意味論的には正しいです。

<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

私は過去にhttp://sorgalla.com/jcarousel/をこのようなものに使用しましたが、これは位置に基づいています: 相対オフセットと左/右オフセット。おそらく、フロートをいじるよりも簡単です。

于 2013-01-15T20:00:14.497 に答える
0

代わりにリスト項目を使用してみて、それらをインラインで表示できます。

于 2013-01-15T20:00:24.990 に答える
0

そのカルーセルを使用して、カルーセル用の JavaScript を生成できますhttp://caroufredsel.dev7studios.com/configuration-robot.php

于 2013-01-15T19:58:27.133 に答える