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

Question

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

在点击数字 3 后，使用向左过渡，我将内部 div 向左移动了一个 block 的长度，因此流畅的动画效果很好。

现在我正在尝试实现这一点:因为数字 3 是最后一个 block ，我想再次显示数字 1 block ，也就是说让 div 无限旋转。

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

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

任何想法都会受到赞赏。

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>