Javascript 如何使用jquery检查next（）的结尾？

我对编程非常陌生，目前正在研究照片滑块的概念，当用户单击下一个箭头时，图像源将从我的li标记列表更改为下一个图像源。但是，我已经到了列表的末尾，如果当前图像源相同并且没有更改，我希望使用相同的图像源。我觉得我真的很接近！谢谢

我的HTML：

   <div id="wrapper">
    <div class="left-arrow">
      <i class="arrow left"></i>
    </div>
    <div class="image-holder"></div>
    <div class="right-arrow">
      <i class="arrow right"></i>
    </div>
  </div>

<ul class="images">
    <li class="active"><img src="images/htmllogolg.png" alt="html" class="firstImg"></li>
    <li><img src="images/csslogolg.png" alt="css"></li>
    <li><img src="images/jslogolg.png" alt="js" class="lastImg"></li>
  </ul>


  <div id="wrapper">
    <div class="left-arrow">
      <i class="arrow left"></i>
    </div>
    <div class="image-holder"></div>
    <div class="right-arrow">
      <i class="arrow right"></i>
    </div>
  </div>

我的JavaScript/JQuery：

$(document).ready(function() {
  // global variables
  var $firstImg = $('.firstImg').attr('src');
  var $lastImg = $('.lastImg').attr('src');
  // get image src of the li with the class "active"
  var $imageSrc = $('li.active>img').attr('src');
  // append the image src of active into the div with class "image-holder"
  $('.image-holder').append("<img src='" + $imageSrc + "'" + " class='placeImg'>");
  // change src of image when user clicks the right arrow
  $('.right').on('click', function() {
    if ($('li.active').next().length > 3)) {
      var $next = $('li.active').next();
      var $nextSrc = $next.children('img').attr('src');
        $('.placeImg').removeAttr('src');
        $('.placeImg').attr('src', $nextSrc);
        if ($('li').hasClass('active')) {
          $('li').removeClass('active');
        }
      $next.addClass('active');

    } else {
      $('.placeImg').attr('src', $lastImg);
    }
  });
  // change src of image when user clicks the left arrow
  $('.left').on('click', function() {
    var $prev = $('li.active').prev();
    var $prevSrc = $prev.children('img').attr('src');
      $('.placeImg').removeAttr('src');
      $('.placeImg').attr('src', $prevSrc);
      if ($('li').hasClass('active')) {
        $('li').removeClass('active');
      }
    $prev.addClass('active');
  });
});

$（文档）.ready（函数（）{
//全局变量
var$firstImg=$（'.firstImg'）.attr（'src'）；
var$lastImg=$（'.lastImg'）.attr（'src'）；
//获取类为“active”的li的图像src
var$imageSrc=$（'li.active>img'）.attr（'src'）；
//使用类“image holder”将active的image src追加到div中
$（'.image holder'）。追加（“”）；
//当用户单击右箭头时更改图像的src
$（'.right'）。在（'click'，function（）上{
如果（$（'li.active'）.next（）.length>3））{
var$next=$（'li.active'）.next（）；
var$nextSrc=$next.children（'img'）.attr（'src'）；
$（'.placeImg'）.removeAttr（'src'）；
$（'.placeImg'）.attr（'src'，$nextSrc）；
if（$（'li'）.hasClass（'active'））{
$（'li'）.removeClass（'active'）；
}
$next.addClass（'active'）；
}否则{
$（'.placeImg'）.attr（'src'，$lastImg）；
}
});
//当用户单击左箭头时更改图像的src
$（'.left'）。在（'click'，function（）上{
var$prev=$（'li.active'）.prev（）；
var$prevSrc=$prev.children（'img'）.attr（'src'）；
$（'.placeImg'）.removeAttr（'src'）；
$（'.placeImg'）.attr（'src'，$prevSrc）；
if（$（'li'）.hasClass（'active'））{
$（'li'）.removeClass（'active'）；
}
$prev.addClass（“活动”）；
});
});

我自己想出来的！这是新代码

我的HTML：

   <div id="wrapper">
    <div class="left-arrow">
      <i class="arrow left"></i>
    </div>
    <div class="image-holder"></div>
    <div class="right-arrow">
      <i class="arrow right"></i>
    </div>
  </div>

<ul class="images">
    <li class="active"><img src="images/htmllogolg.png" alt="html" class="firstImg"></li>
    <li><img src="images/csslogolg.png" alt="css"></li>
    <li><img src="images/jslogolg.png" alt="js" class="lastImg"></li>
  </ul>


  <div id="wrapper">
    <div class="left-arrow">
      <i class="arrow left"></i>
    </div>
    <div class="image-holder"></div>
    <div class="right-arrow">
      <i class="arrow right"></i>
    </div>
  </div>

我的JavaScript：

$(document).ready(function() {
  // global variables
  var $firstImg = $('.firstImg').attr('src');
  var $lastImg = $('.lastImg').attr('src');
  // get image src of the li with the class "active"
  var $imageSrc = $('li.active>img').attr('src');
  // append the image src of active into the div with class "image-holder"
  $('.image-holder').append("<img src='" + $imageSrc + "'" + " class='placeImg'>");
  // change src of image when user clicks the right arrow
  $('.right').on('click', function() {
    var $next = $('li.active').next();
    var $nextSrc = $next.children('img').attr('src');

    if ($('.placeImg').attr('src') == $lastImg) {
      $('.placeImg').attr('src', $lastImg);
    } else {
      $('.placeImg').removeAttr('src');
      $('.placeImg').attr('src', $nextSrc);
      if ($('li').hasClass('active')) {
        $('li').removeClass('active');
      }
    $next.addClass('active');
    }
  });
  // change src of image when user clicks the left arrow
  $('.left').on('click', function() {
    var $prev = $('li.active').prev();
    var $prevSrc = $prev.children('img').attr('src');

    if ($('.placeImg').attr('src') == $firstImg) {
      $('.placeImg').attr('src', $firstImg);
    } else {
      $('.placeImg').removeAttr('src');
      $('.placeImg').attr('src', $prevSrc);
      if ($('li').hasClass('active')) {
        $('li').removeClass('active');
      }
    $prev.addClass('active');
    }
  });
});

$（文档）.ready（函数（）{
//全局变量
var$firstImg=$（'.firstImg'）.attr（'src'）；
var$lastImg=$（'.lastImg'）.attr（'src'）；
//获取类为“active”的li的图像src
var$imageSrc=$（'li.active>img'）.attr（'src'）；
//使用类“image holder”将active的image src追加到div中
$（'.image holder'）。追加（“”）；
//当用户单击右箭头时更改图像的src
$（'.right'）。在（'click'，function（）上{
var$next=$（'li.active'）.next（）；
var$nextSrc=$next.children（'img'）.attr（'src'）；
if（$（'.placeImg'）.attr（'src'）==$lastImg）{
$（'.placeImg'）.attr（'src'，$lastImg）；
}否则{
$（'.placeImg'）.removeAttr（'src'）；
$（'.placeImg'）.attr（'src'，$nextSrc）；
if（$（'li'）.hasClass（'active'））{
$（'li'）.removeClass（'active'）；
}
$next.addClass（'active'）；
}
});
//当用户单击左箭头时更改图像的src
$（'.left'）。在（'click'，function（）上{
var$prev=$（'li.active'）.prev（）；
var$prevSrc=$prev.children（'img'）.attr（'src'）；
if（$（'.placeImg'）.attr（'src'）==$firstImg）{
$（'.placeImg'）.attr（'src'，$firstImg）；
}否则{
$（'.placeImg'）.removeAttr（'src'）；
$（'.placeImg'）.attr（'src'，$prevSrc）；
if（$（'li'）.hasClass（'active'））{
$（'li'）.removeClass（'active'）；
}
$prev.addClass（“活动”）；
}
});
});