5

我有一个容器 div 元素，它应该包含所有子 div 元素。我看到了这个线程：Slide a div offscreen using jQuery，我想知道如何实现它（在 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
On autoslide$(this).is(".prev")也将被使用，就像单击Next按钮false一样。 在 mouseenter 上只是当前正在运行，在 mouseleave 上（第二个参数）重新初始化++C
clearIntervalitv.hoveritv

动画是通过将 C*100translateX乘以- C * 100 %

于 2013-03-11T12:22:12.273 回答
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/

于 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 回答