Question

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

这是我的概念：我使用3个具有相同class =“carr”（ATT）的div，我正在尝试执行以下操作，如果div是：visible，当我单击“next”按钮时，这个div将被隐藏，并且在那之后的div显示出来。这个过程重复了div之后。当最后一个div是：可见如果在“如果最后一个元素是可见的，在点击下一个按钮显示第一个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类唯一的可见元素。然后我检查它是否是其父母的最后一个孩子。如果是这样，我选择第一个孩子作为下一个要显示的项目。否则，我只需选择下一个。然后我隐藏当前的那个并显示下一个。

我希望这有帮助！

Answer 2

最好只切换hidden类。

HTML：

  <div class="carr">A</div>
  <div class="carr hidden">B</div>
  <div class="carr hidden">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;
}

.hidden {
  display:none;
}

.carr {
  position: absolute;
  float:left;
  color:white;
  font-size:20px;
  width:50px;
  height:50px;
  background:crimson;
  text-align:center;
  margin-left:10px;
}

的JavaScript：

$(function(){

    var slides   = [],
        curSlide = 0;

    $('.carr').each(function(i) {
        slides[i] = $(this);
    });

    $('#ca, #fu').click(function() {
        slides[curSlide].addClass('hidden');
        if ($(this).attr('id') === 'fu') {
            curSlide = (curSlide < slides.length - 1) ? curSlide + 1 : 0;
        } else {
            curSlide = (curSlide > 0) ? curSlide - 1 : slides.length - 1;
        }
        slides[curSlide].removeClass('hidden');
    });

});

笔： http://codepen.io/scheisse_minelli/pen/mCxuD

无法使我的图像滑块滑动

2 个答案: