javascript - 如何用 jquery 检查 next() 的结束？

Question

我是编程新手，目前正在研究照片 slider 的概念，当用户单击下一个箭头时，图像源会更改为我的 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>

我的 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');
  });
});

Answer 1

我自己解决了!这是新代码!

我的 HTML:

<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');
    }
  });
});