jquery - 移动内部 div 从开始 CSS Jquery Javascript 重复

Question

我正在尝试在 angularJs 中实现一个类似轮播的组件，其中一个 div 被放置在第二个 div 中，如下图所示。

单击数字 3 后，使用向左过渡，我将内部 div 向左移动了一个块的长度，因此平滑的动画就位。

现在我正在尝试实现这一点：由于 3 号是最后一个块，我想再次显示 1 号块，让 div 无限旋转。

我曾尝试将第一个块切碎并将其添加到 div 的末尾，但这会消除动画，因为 div 的左侧已经改变。

所以基本上我正在寻找一种在另一个 div 中重复 div 的方法。

任何想法都值得赞赏。

标签： jquerycsscarouselrepeat

Answer 1

下面的示例将克隆下一个项目并将其添加到末尾，然后单击上一个时，它将删除已克隆的项目。

这不起作用- 这意味着单击prev原始的第一张幻灯片不会在开头添加任何内容

注意：如果用户决定继续单击下一步，项目将继续克隆

$(document).ready(function(){
  var $wrap = $('.img-wrapper'),
      c_length = $wrap.children().length,
      n_index = 0;
  $('.prev').click(function(){
    var $a = $('.img.active'),
        $b = $a.prev();
    if($b.length === 0){
      return;
    }
    $a.removeClass('active');
    if($a.hasClass('cloned')){
      if(n_index === 0){n_index=c_length-1;}else{n_index--;}
      setTimeout(function(){$a.remove();},300);
    }
    $b.addClass('active');
    $wrap.css('left',-$b.position().left);
  });
  $('.next').click(function(){
    var $a = $('.img.active'),
        $b = $a.next();
    if($b.length === 0){
      $b = $wrap.find('[data-index="'+n_index+'"]').eq(0).clone();
      $b.addClass('cloned');
      $b.insertAfter($a);
      if(n_index+1 === c_length){
        n_index = 0;
      }else{
        n_index++;
      }
    }
    $a.removeClass('active');
    $b.addClass('active');
    $wrap.css('left',-$b.position().left);
  });
});

* {
  box-sizing:border-box;
}

.carousel {
  width: 400px;
  padding: 20px;
  overflow: hidden;
  height: 200px;
  margin:auto;
  position:relative;
}

.img-wrapper {
  white-space:nowrap;
  position:absolute;
  left:0;
  top:0;
  font-size:0;
  transition:left .3s, right .3s;
}

.img {
  width:400px;
  height:200px;
  padding:40px 80px;
  font-size:32px;
  color:#fff;
  background:grey;
  display:inline-block;
}

.img.static.active {
  position:absolute;
}

.carousel-button {
  position:absolute;
  top:20px;
  padding:5px 10px;
  z-index: 5;
  background:#eee;
}

.prev {
  left: 0;
}
.next {
  right: 0;
}

<div class="carousel">
  <div class="carousel-button prev">Prev</div>
  <div class="img-wrapper">
      <div class="img active" data-index="0">IMG 1</div>
      <div class="img" data-index="1">IMG 2</div>
      <div class="img" data-index="2">IMG 3</div>
  </div>
  <div class="carousel-button next">Next</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>