jquery - 无法使我的图像 slider ，幻灯片

Question

我正在尝试从头开始构建 slider ，但遇到了一些问题。

这是我的概念:我正在使用 3 个具有相同 class="carr"(ATT) 的 div，并且我正在尝试执行以下操作，如果 div 是:可见的，当我单击“下一步”按钮时，该 div 将被隐藏，而紧随其后的 div 将显示出来。这个过程在 div 之后重复。当最后一个 div 是 :visible 时，如果在“如果最后一个元素可见，则单击下一个按钮时显示第一个 div”行中会有一些内容，这将是与以前相同的过程。前一个按钮的过程将同样..对于相同的方法。我能得到一些帮助吗？我会在最后张贴代码和一支笔。

HTML:

<div id="slider">

  <div id="a" class="carr">A</div>
  <div id="b" class="carr">B</div>
  <div id="c" class="carr">C</div>

</div>

<div id="butons">
  <button id="ca">←</button>
  <button id="fu">→</button>
</div>  

CSS:

body{
  background:indigo;
}

#butons{
  margin-right:20px;
  float:right;
}

button{
  border: 0;
  background: DarkSlateGray ;
  height:20px;
  width:50px;
  margin-right:10px;
  color:white;
  outline: none;
}

#a,#b,#c{
  float:left;
  color:white;
  font-size:20px;
  width:50px;
  height:50px;
  background:crimson;
  text-align:center;
  margin-left:10px;
}

#b, #c{
  display:none;
}

我的基本和蹩脚的 JQuery 尝试......:

$(document).ready(function(){

   $('#fu').click(function(){

    if($('.carr').is(':visible')){

      $('.carr').parent().next(".carr").show();

    }

    else{
      alert();
    }

  });

});

这里是 PEN .

Answer 1

This should do it.

问题出在这里:

if($('.carr').is(':visible')){

  $('.carr').parent().next(".carr").show();

}

首先，$('.carr') 选择所有类为 carr 的 div。然后你问 jQuery 它们是否都可见，当然，它们永远不会。

但即使条件有效，在其中，$('.carr').parent().next(".carr").show() 实际上会从中选择下一个 div父级，即包含按钮的 div。

你想要做的是这样的:

var current = $('.carr:visible');
var next;

if (current.is(':last-child')) {
  next = current.siblings(':first-child');
} else {
  next = current.next();
}

current.hide();
next.show();

首先，我选择具有 carr 类的唯一可见元素。然后我检查它是否是其 parent 的最后一个 child 。如果是这样，我选择第一个 child 作为下一个要显示的元素。否则，我只是选择下一个。然后我隐藏当前一个并显示下一个。

希望对您有所帮助!