javascript - .next() 和 .prev() 循环遍历 div

Question

我想使用简单的 jQuery 来通过 div 元素执行滑动。但是如何使用 next() 和 prev() 来浏览幻灯片项目？

问题是当你继续下一个、下一个、下一个、下一个时。 div 最终停止并且不显示；它不会循环回第一个 div。

这是我到目前为止所得到的:

$("p.right").click(function() {
  $(".item.active").removeClass("active").next(".item").addClass("active").show();
});
$("p.left").click(function() {
  $(".item.active").removeClass("active").prev(".item").addClass("active").show();
});

Section {
  position: relative;
  height: 200px;
  width: 200px;
  text-align: center;
}

p {
  position: absolute;
  margin: 0px;
  padding: 5px 10px;
  background: blue;
  color: #ffffff;
  border-radius: 100%;
}

p.left {
  top: 0px;
  left: 20px;
}

p.right {
  top: 0px;
  right: 20px;
}

div {
  display: none;
}

div.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div class="item active">First Item</div>
  <div class="item">Second Item</div>
  <div class="item">Third Item</div>
  <div class="item">Last Item</div>
  <p class="right">N</p>
  <p class="left">P</p>
</section>

Answer 1

尝试一些迭代:

if (this.is('div:last-child')) { 
   //Start carousel over at first child
}else {
   // On to the next one
}