0

我正在创建水平网页，因为它没有任何主菜单，所以我将使用下一个和上一个按钮，但是当我使用 jQuery 时，它会出现问题

当它到达最后一个 li 脚本错误时，我需要知道当它到达最后一个元素时如何到达或返回第一个 elemebt

这是我现在的代码

<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 因为家在中心所以在第一次加载 Windows 视口将强制居中或转到#home

谢谢

4

2 回答 2

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);
});
于 2013-09-04T18:45:11.897 回答
0

您需要检查当前元素之后是否还有另一个元素。由于 last 之后没有任何内容li，因此当没有任何内容返回为.next().

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

您需要对另一个按钮执行相同的操作，确保有前一个元素或将目标设置为#right.

于 2013-09-04T18:46:01.623 回答