5

コンテナのdiv要素があります。これにはすべての子div要素が含まれている必要があります。私はこのスレッドを見ました：jQueryを使用してdivを画面外にスライドさせ、それを実装する方法を考えていました（div要素内であり、本体ではありません）。コードは正常に機能していますが、「ラッパー」div要素の幅が500pxの場合、子divをどのようにラップする必要がありますか？iframeを使用する必要がありますか...？

理解を深めるために、私はこの画像を作成しました。 ここに画像の説明を入力してください

赤い長方形は窓になり、灰色の背景は壁になります。ウィンドウを通してのみ表示され、現在のdiv要素を表示できます。右ボタン-aqua-を押すと緑色のdivが表示され、左ボタンを押すと黄色のdivが表示されます。

注意：Div要素は壁ではなく移動する必要があります。

4

3 に答える 3

17

ロジックには jQuery を、 および には CSS3 を使用transitionしtransformます。
複数のギャラリー + 自動スライド + ホバーで一時停止:

$(function(){

  $('.gallery').each(function() {

    var $gal     = $(this),
        $movable = $(".movable", $gal), 
        $slides  = $(">*", $movable),
        N        = $slides.length,
        C        = 0,
        itv      = null;
    
    function play() { itv = setInterval(anim, 3000); }
    function stop() { clearInterval(itv); }
    function anim() {
      C = ($(this).is(".prev") ? --C : ++C) <0 ? N-1 : C%N;
      $movable.css({transform: "translateX(-"+ (C*100) +"%)"});
    }
    
    $(".prev, .next", this).on("click", anim);
    $gal.hover(stop, play);
    play();

  });

});
.gallery{
  position: relative;
  overflow: hidden;
}
.gallery .movable{
  display: flex;
  height: 70vh;
  transition: transform 0.4s;
}
.gallery .movable > div {
  flex:1;
  min-width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Pause on hover and autoslide

<div class="gallery">
  <div class="movable">
    <div style="background:#0af">1 <p style="position:absolute; top:400px;">aaaa</p></div>
    <div style="background:#af9">2</div>
    <div style="background:#f0a">3</div>
  </div>
  <button class="prev">Prev</button>
  <button class="next">Next</button>
</div>

As many galleries as you want

スライドの数を数え、カウンター Cに入れます。
[次へ] ボタンをクリックするのと同じように、[前へ]または [次へC
]をクリックして操作します。 mouseenter では単に現在実行中のものを、mouseleave (2 番目の引数) では再初期化します。$(this).is(".prev")false++C
clearIntervalitv.hoveritv

アニメーションは、C*100translateXと- C * 100 %

于 2013-03-11T12:22:12.273 に答える
2

コンテナ div に 3 つの div すべてを追加し、長い div をウィンドウで包み込み、オーバーフローを非表示にします。

たとえば、ウィンドウ領域が 960px の場合、内部の div は 3x 960 (2880) になります。

左の位置を960ずつ変更することで中央に配置できます（長いdivを相対的な位置に配置し、ウィンドウをオーバーフローして非表示にします）

#window{
width:960px;
overflow: hidden;
}

#container{
position: relative;
left: -960px;
}

.content_box{
width:960px;
}

次に、javascript (jQuery) を使用して左の位置をアニメーション化できます。

$('#arrow-left').click(function() {
  $('#container').animate({
   left: '-=960'
  }, 5000, function() {
  // Animation complete.
  });
});


$('#arrow-right').click(function() {
  $('#container').animate({
   left: '+=960'
  }, 5000, function() {
  // Animation complete.
  });
});

.animate の詳細については、マニュアルを参照してください: http://api.jquery.com/animate/

于 2013-03-11T12:03:11.110 に答える
2 
<div id="parent">
  <div id="container">
    <div id="child1"></div>
    <div id="child2"></div>
  </div>
</div>

親の赤い div CSS プロパティを指定します。

position: relative;
overflow: hidden;
width: 500px;
height: somevalue;

子 div を別の div "たとえばコンテナー" でラップし、次の css プロパティを指定します。

position: absolute;
width: ;/*overall width of all children divs including margins*/
top: 0;
left: 0;
height: ;/*same as parent*/

そして最後に子の div の場合:

float: left;
height: ;/*same as parent*/
于 2013-03-11T12:15:12.733 に答える