.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
}