javascript - slider 在最后一张幻灯片上无法正常工作

Question

我目前正在学习 Jquery，而且我完全是个新手。目前我正试图让这个自定义 slider 工作。 我想要实现的是，当有人点击 prev或 next buttons ， slider 没有任何变化，但上面写的文本发生变化，即转到下一个 <li>元素。我写了一些代码，它工作正常，但是当 slider 在最后一个 child 上时，问题就来了。当我单击下一步按钮时，文本消失了，现在我什至无法返回。我正在粘贴我在这里写的所有代码，如果有任何帮助，我将不胜感激，并会帮助我学习。非常感谢!

HTML

<ul class="testimonial-text">
  <li class="test-current">
    <p>“Sagittis risus nec venenatis. Ut laoreet iaculis massa et feugiat. Cras elementum quamvitae magna as elementum quamvitae magna porttitor in fermentum setlat ul.”</p>

    <h4>Michel Buble &amp; Tinta turner</h4>
  </li>
  <li>
    <p>“Sagittis risus nec venenatis. Ut laoreet iaculis massa et feugiat. Cras elementum quamvitae magna as elementum quamvitae magna porttitor in fermentum setlat ul.”</p>

    <h4>Rick Armstrong &amp; Ashley Tist</h4>
  </li>
  <li>
    <p>“Sagittis risus nec venenatis. Ut laoreet iaculis massa et feugiat. Cras elementum quamvitae magna as elementum quamvitae magna porttitor in fermentum setlat ul.”</p>

    <h4>Mike Tran &amp; Kimse Tricks</h4>
  </li>
  <li>
    <p>“Sagittis risus nec venenatis. Ut laoreet iaculis massa et feugiat. Cras elementum quamvitae magna as elementum quamvitae magna porttitor in fermentum setlat ul.”</p>

    <h4>Michel Buble &amp; Tinta turner</h4>
  </li>
  <li>
    <p>“Sagittis risus nec venenatis. Ut laoreet iaculis massa et feugiat. Cras elementum quamvitae magna as elementum quamvitae magna porttitor in fermentum setlat ul.”</p>

    <h4>Michel Buble &amp; Tinta turner</h4>
  </li>
</ul>

按钮

<a class="testimonials-prev" ></a>
<a class="testimonials-next" ></a>

CSS

ul.testimonial-text{
  list-style: none;
  padding-top: 20px;
}
ul.testimonial-text li{
display: none;
}
ul.testimonial-text li.test-current{
  display: block;
}
ul.testimonial-text li p{
  text-align: center;
  font-size: 18px;
  color: #7c7c7c;
  margin-bottom: 0px;
}
ul.testimonial-text li h4{
  text-align: center;
  text-transform: uppercase;
  font-size: 16px;
}
ul.testimonial-images{
  list-style: none;
}
ul.testimonial-images li{
  display: inline-block;
  margin-left: 16px;
  opacity: 0.6;
}
ul.testimonial-images li:first-child{
  display: inline-block;
  margin-left: 0px;
}
a.testimonials-prev{
  background: url('../images/icons/test-icons.png') no-repeat;
  height: 80px;
  width: 40px;
  display: block;
  margin-left: 10px;
  cursor: pointer;
}
a.testimonials-next{
  background: url('../images/icons/test-icons.png') no-repeat top right;
  height: 80px;
  width: 40px;
  display: block;
  cursor: pointer;
}

JQUERY/JavaScript

  <script type="text/javascript">

$(document).ready(function() {

$("a.testimonials-next").click(function() {
  $("ul.testimonial-text li.test-current").fadeOut('slow', function() {
    $("ul.testimonial-text li.test-current").next().fadeIn('slow');
    $("ul.testimonial-text li.test-current").next().addClass('test-current');
    $("ul.testimonial-text li.test-current:first").removeClass('test-current');
});

  });
$("a.testimonials-prev").click(function() {
  $("ul.testimonial-text li.test-current").fadeOut('slow', function() {
    $("ul.testimonial-text li.test-current").prev().fadeIn('slow');
    $("ul.testimonial-text li.test-current").prev().addClass('test-current');
    $("ul.testimonial-text li.test-current:last").removeClass('test-current');
});

});

});

</script>

如果代码草率，我非常抱歉。非常感谢!

Answer 1

试试这个:-

$("a.testimonials-next").click(function() {
      $("ul.testimonial-text li.test-current").fadeOut('slow', function() {
        var index = $("ul.testimonial-text li).index($(this));
        if(index == $("ul.testimonial-text li).length - 1){
            var $next = $("ul.testimonial-text li:first");
        }
        else    {
            var $next = $(this).next();
        }    
        $(this).removeClass('test-current');
        $next.addClass('test-current').fadeIn('slow');
    });

      });

    $("a.testimonials-prev").click(function() {
      $("ul.testimonial-text li.test-current").fadeOut('slow', function() {
         var index = $("ul.testimonial-text li).index($(this));
         if(index == 0){
            var $prev = $("ul.testimonial-text li:last");
        }
        else    {
            var $prev = $(this).prev();
        }  

        $(this).removeClass('test-current');
        $prev.addClass('test-current').fadeIn('slow');
    });

    })

;