div中的jquery slide div

Question

我有一个容器div元素，它应该包含所有子div元素。 我看到了这个帖子：Slide a div offscreen using jQuery我想知道如何实现它（在div元素内而不是在body中）。 代码工作正常，但是如果“wrapper”div元素的宽度为500px，我应该如何包装子div？我需要使用iframe还是......？

为了更好地理解我制作了这张图片：

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

注意：Div元素应该移动而不是墙。

Answer 1

jQuery用于transition和transform的逻辑和CSS3 多个图库+自动滑动+暂停时暂停：

$(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
在autoslide上$(this).is(".prev")也会评估为false，因此会使用++C，就像点击下一步按钮一样。
在mouseenter上，只需clearInterval当前正在运行的itv和mouseleave（第二个.hover参数）重新初始化itv

通过将C * 100和translateX乘以- C * 100 %

来实现动画

Answer 2

在容器div中添加所有三个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/

Answer 3

<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*/

最后是儿童divs：

float: left;
height: ;/*same as parent*/