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
}

Answer 2

好的想一想，我终于拿出了答案。如果有人想知道我是怎么做的，那就是这里。

我的灵感来自Erik Grosskurth帖子

$("p.right").click(function(){
		if ($(".item.active").next(".item").length){
			$(".item.active").removeClass("active").next(".item").addClass("active");
		} else {
			$(".item.active").removeClass("active");
			$(".item:first").addClass("active");
		}
	});
	
	$("p.left").click(function(){
		if ($(".item.active").prev(".item").length){
			$(".item.active").removeClass("active").prev(".item").addClass("active");
		} else {
			$(".item.active").removeClass("active");
			$(".item").last().addClass("active");
		}
	});

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 3

您需要检查.active的索引是第一个还是最后一个项目。

$(function() {
  var numSlides = $('div.active').parent().find('div').length;

  $("p.right").click(function() {
    if( $('div.active').index()+1 == numSlides ) {
      $('div.active').removeClass('active').parent().find('div:first').addClass('active');
    }
    else {
      $("div.active").removeClass("active").next("div").addClass("active");
    }
  });
  $("p.left").click(function() {
    if( $('div.active').index() == 0 ) {
      $('div.active').removeClass('active').parent().find('div:last').addClass('active');
    }
    else {
      $("div.active").removeClass("active").prev("div").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="active">First Item</div>
  <div>Second Item</div>
  <div>Third Item</div>
  <div>Last Item</div>
  <p class="right">N</p>
  <p class="left">P</p>
</section>

Answer 4

下面是一个工作解决方案，当你到达项目列表的任何一端时循环 - 虽然p.left函数不会从头到尾，因为SO片段的编码方式（使用<div> s）。

p.right函数按预期工作，p.left函数在“普通”Web环境中的工作方式类似。

$("p.right").click(function() {
  if ($("div.active").next("div").text() == "") {
    // if at the last item, loop around
    $("div.active").removeClass("active");
    $("div").first().addClass("active").show();
  } else {
    // else go to the next one
    $("div.active").removeClass("active").next("div").addClass("active").show();
  }
});
$("p.left").click(function() {
  if ($("div.active").prev("div").text() == "") {
    // if at the first item, loop around
    $("div.active").removeClass("active");
    $("div").last().addClass("active").show();
  } else {
    // else go to the previous one
    $("div.active").removeClass("active").prev("div").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="active">First Item</div>
  <div>Second Item</div>
  <div>Third Item</div>
  <div>Last Item</div>
  <p class="right">N</p>
  <p class="left">P</p>
</section>

Answer 5

我有一个部分解决方案来检测你是否要经过最后一个div（或第一个div之前）：

https://jsfiddle.net/cewqotsv/1/

基本上，您可以检测“活动”之后是否有任何div

if($("div.active").next("div").length == 0){
  //do nothing
}

.next（）和.prev（）循环遍历div

5 个答案: