div中的jquery slide div

Question

我有一个容器div元素,它应该包含所有子div元素.我看到了这个帖子:使用jQuery在屏幕外滑动div,我想知道如何实现它(在div元素内而不是在body中).代码工作正常,但是如果"wrapper"div元素的宽度为500px,我该如何包装子div呢？我需要使用iframe还是......？

为了更好地理解我做了这个图像:

红色矩形是一个窗口,灰色背景是墙.您只能看到窗口并看到当前的div元素.如果你按下右键-aqua-你将看到绿色div,如果你按下左按钮,你会看到黄色div.

注意:Div元素应移动而不是墙.

Answer 1

jQuery用于逻辑和CSS3 for 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.
在prev/next click操作C
On autoslide $(this).is(".prev")也将评估,false因为++C将使用,就像单击Next按钮一样.
在mouseenter上,只clearInterval需要当前运行的itv和on mouseleave(第二个.hover参数)重新初始化itv

动画是通过乘以C*100和translateXby来实现的- C * 100 %