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

Back to first li when move to last li ( Using Jquery Scroll To Next)

本文关键字：li Jquery 滚动 使用 下一个 返回 最后一个 移动 第一个      更新时间：2023-09-26

我正在创建水平网页因为它没有任何主菜单我将使用"下一个"answers"上一个"按钮但当我使用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

感谢

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

您需要检查当前元素之后是否还有其他元素。由于在最后一个li之后没有任何内容，所以当没有任何内容作为.next()返回时会出现错误。

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

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

相关文章：