javascript - 带有 DIV 的水平幻灯片

Question

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

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

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

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

Answer 1

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

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