javascript - 移动到最后一里时回到第一里(使用 Jquery 滚动到下一个)

Question

我正在创建横向网页 因为它没有任何主菜单 我将使用下一个和上一个按钮 但是当我使用 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;
    }

我使用 scrollleft 是因为 home 位于中心，所以在第一次加载时，windows viewport 将强制居中或转到#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);
});