带有 DIV 的水平幻灯片答案

【问题标题】：Horizontal slideshow with DIVs带有 DIV 的水平幻灯片
【发布时间】：2013-03-11 12:00:23
【问题描述】：

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

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

红色矩形是窗户，灰色背景是墙壁。您只能通过窗口查看并查看当前的 div 元素。如果你按下右边的按钮 -aqua- 你会看到绿色的 div，如果你按下左边的按钮你会看到黄色的 div。

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

【问题讨论】：

使用 offset() 或 position() 和 left 属性并为 div 设置动画。

标签： javascript jquery css slide

【解决方案1】：

transition 和 transform 的逻辑和 CSS3 的 jQuery。
多个画廊 + 自动滑动 + 悬停时暂停：

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

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

【讨论】：

我进行了修改，因此无需点击即可完成轮播，jsfiddle.net/yddcxxef/1。我只是想知道如何添加一个在悬停时暂停滑块并在未悬停时继续的功能？谢谢。还有，它是连续的吗？
@SearchForKnowledge 不，上面的示例并不适用于无限滑块，尽管通过一些 CSS 和 JS 的修改很容易实现，但幻灯片重新排序。如您所见，您的演示毫无用处:)（代码甚至不合适）。对于自动滑动，您需要保持相同的逻辑，但创建 auto play 和 stop 函数。比你喜欢的$gal.hover(stop, play); 更喜欢stop 清除一个区间，play 在该区间启动anim 逻辑。
我想；）。我实际上创造了一个更好的小提琴，但能够找出问题所在。感谢您的回复。

【解决方案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/

【讨论】：

...你的意思是overflow:hidden;

【解决方案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*/

最后是儿童 div：

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

【讨论】：