如何使html中的next按钮、prev按钮在div中滚动许多元素？（使用jquery、javascript）_Javascript_Jquery_Html_Css

如何使html中的next按钮、prev按钮在div中滚动许多元素？（使用jquery、javascript）

javascript jquery html css

如何使html中的next按钮、prev按钮在div中滚动许多元素？（使用jquery、javascript）,javascript,jquery,html,css,Javascript,Jquery,Html,Css,!！我有一张照片第1分部第2分部第3分部第4分部第5分部第6分部第7分部第8分部第9分部当我有更多的元素时，它会使div充满。如何制作“下一步”按钮和“上一步”按钮，我想在单击“下一步”按钮时滚动一些元素，然后显示5或6个元素。当我点击上一个按钮时，它会滚动上一个会话中的一些元素。谢谢我正在我的项目中使用来实现这一点您可以将其作为独立的js版本和JQuery插件获得。它在移动和触摸设备上运行良好。查看或开始。您可以使用锚定（an）因此，您可以向DOM添加

!！我有一张照片



第1分部
第2分部
第3分部
第4分部
第5分部
第6分部
第7分部
第8分部
第9分部

当我有更多的元素时，它会使div充满。如何制作“下一步”按钮和“上一步”按钮，我想在单击“下一步”按钮时滚动一些元素，然后显示5或6个元素。当我点击上一个按钮时，它会滚动上一个会话中的一些元素。谢谢

我正在我的项目中使用来实现这一点

您可以将其作为独立的js版本和JQuery插件获得。它在移动和触摸设备上运行良好。查看或开始。您可以使用锚定（an

）
因此，您可以向DOM添加锚定，并将操作绑定到按钮，以计算正确的锚定名称。
以下是一个例子：
<html>
  <head>
    <style>
      ul li { height: 200px;}
      #slider aside {
          position: fixed;
          top: 0px;
      }
    </style>
  </head>
  <body>
    <div id="slider">
      <aside>
          <button class="prev">prev</button>
          <button class="next">next</button>
      </aside>
      <ul>
          <li class="li"><a id="1"></a> Div 1</li>
          <li class="li"><a id="2"></a> Div  2</li>
          <li class="li"><a id="3"></a> Div  3</li>
          <li class="li"><a id="4"></a> Div  4</li>
          <li class="li"><a id="5"></a> Div 5</li>
          <li class="li"><a id="6"></a> Div 6</li>
          <li class="li"><a id="7"></a> Div 7 </li>
          <li class="li"><a id="8"></a> Div 8 </li>
          <li class="li"><a id="9"></a> Div 9</li>
      </ul>
      </div>
  </body>
  <script>
    var step = 2;
    var nbDiv = document.querySelectorAll('#slider ul > a').length

    var prevBtn = document.querySelector('#slider button.prev');
    prevBtn.addEventListener('click', function onPrev(event) {
        actualPosition = parseInt(document.location.hash.slice(1));
        if (isNaN(actualPosition))
            actualPosition = step;
        var newPosition = actualPosition - step;
        if (newPosition < 0)
            newPosition = 0;
        document.location.hash = '#' + newPosition;
    });

    var nextBtn = document.querySelector('#slider button.next');
    nextBtn.addEventListener('click', function onNext(event) {
        actualPosition = parseInt(document.location.hash.slice(1));
        if (isNaN(actualPosition))
            actualPosition = 0;
        var newPosition = actualPosition + step;
        if (newPosition > nbDiv)
            newPosition = nbDiv;
        document.location.hash = '#' + newPosition;
    });
  </script>
</html>

也许是这样的？
var lis = document.querySelectorAll('#slider > ul > li');
for (var i=0, li; li=lis[i]; i++)  {
    var anchor = document.createElement('a');
    anchor.name = i.toString();
    li.insertBefore(anchor, li.firstChild);
}