如何制作下一個按鈕，html中的prev按鈕滾動div中的很多元素？（使用jquery，javascript）

Question

我有照片

<div id="slider">
    <ul>
        <li class="li"> Div 1</li>
        <li class="li"> Div  2</li>
        <li class="li"> Div  3</li>
        <li class="li"> Div  4</li>
        <li class="li"> Div 5</li>
        <li class="li"> Div 6</li>
        <li class="li"> Div 7 </li>
        <li class="li"> Div 8 </li>
        <li class="li"> Div 9</li>
    </ul>
</div>

當我有更多的元素時，它會使div充滿。 如何創建下一個按鈕和上一個按鈕，我想在下一個按鈕時滾動一些元素，然后顯示5或6個元素。 當我單擊上一個按鈕時，它會在上一個會話中滾動一些元素。 謝謝！

Answer 1

我在我的項目中使用swiper.js來實現這一目標。

你可以把它作為一個獨立的js版本和一個JQuery插件。 它適用於移動和觸摸設備。 查看文檔或示例以開始使用。

Answer 2

您可以使用錨點（具有id屬性的<a>元素用作命名錨點）。

瀏覽器將頁面滾動到URL上的右側錨點（ <a id="myanchor"></a> ），如http://mywebsite.com/foo.html#myanchor

在Javascript方面，你可以通過document.location.hash = "#myanchor";跳轉到特定的錨點document.location.hash = "#myanchor"; （講座）。

因此，您可以向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>

請注意，您可以在Javascript（講座）中動態添加錨點：

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

如何制作下一個按鈕，html中的prev按鈕滾動div中的很多元素？（使用jquery，javascript）

問題描述

2 個解決方案

解決方案1
0 2015-05-22 08:17:54

解決方案2
0 2015-05-22 09:14:52

如何制作下一個按鈕，html中的prev按鈕滾動div中的很多元素？（使用jquery，javascript）

問題描述

2 個解決方案

解決方案1 0 2015-05-22 08:17:54

解決方案2 0 2015-05-22 09:14:52

解決方案1
0 2015-05-22 08:17:54

解決方案2
0 2015-05-22 09:14:52