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

我使用了滚动条，因为家是在中心所以首先加载窗口视口将强制居中或转到#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。

移动到最后一个li时返回第一个li（使用Jquery滚动到下一个）

2 个答案: