移到最后一個li時返回第一個li（使用jQuery滾動到下一個）

Question

我正在創建水平網頁，因為它沒有任何主菜單，所以我將使用next和prev按鈕，但是當我使用jQuery時，這是一個問題

當它到達最后一個腳本錯誤時，我需要知道當到達最后一個元素時如何到達或返回第一個元素

這是我現在的代碼

<ul class="hidden-container">
    <li id="left" class="left">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </li>
    <li id="home" class="left">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </li>
    <li id="right" class="left">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </li>
  </ul>

和javascript：

    <script> 
$(function(){
  $('html, body').animate({ scrollLeft: $("#home").offset().left });

  var currentElement = $("li#home");

   // completely ignoring boundaries


    $("#prev").click(function() {
     currentElement = currentElement.prev();
     scrollTo(currentElement);
    });
    $("#next").click(function() {
     currentElement = currentElement.next();
     scrollTo(currentElement);
    });
    function scrollTo(element) {
     $(window).scrollLeft(element.position().left);
    } 

});

</script>

CSS：

    body {
      height: 800px;
      width: 940px;
    }

    #container {
        width: 2700px;
        position: relative;      
    }
    #prev {
      position: fixed;
      z-index: 6;
      top: 0;
      left: 0;  
    }
    #next {
      position: fixed;
      z-index: 7;
      top: 0;
      right: 0;  
    }
    .hidden-container {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
    }
    #home {
      width: 700px;
      visibility: hidden;
    }
    #left {
      width: 700px;
      visibility: hidden;
    }
    #right {
      width: 700px;
      visibility: hidden;
    }

我正在使用向左滾動，因為主頁位於中心，因此在第一次加載時，Windows視口將強制居中或轉到#home

謝謝

Answer 1

currentElement可能是空的jQuery集合。 您可以簡單地將其替換為同一集合的第一個/最后一個（如果為空）。

$("#prev").click(function() {
 var ce = currentElement.prev();
 if (!ce.length) {
     ce = currentElement.last();
 }
 scrollTo(ce);
});
$("#next").click(function() {
 var ce = currentElement.next();
 if (!ce.length) {
     ce = currentElement.first();
 }
 scrollTo(ce);
});

Answer 2

您需要檢查一下當前元素之后是否還有另一個元素。 由於最后一個li之后沒有任何內容，所以當.next()沒有返回任何內容時，將出現錯誤。

$("#next").click(function() {
    if (currentElement.next().length > 0) {
        currentElement = currentElement.next();
    } else {
        currentElement = $("li#left");
    }
    scrollTo(currentElement);
}

您需要對其他按鈕執行相同的操作，以確保存在上一個元素或將目標設置為#right 。