Question

是否可以让Previous / Next使用Previous或Next div垂直滚动？

如果是这样，它是如何实现的？

<!-- PREVIOUS / NEXT -->
<span class="go-prev">Previous</span> 
<span class="go-next">Next</span>

<!-- CONTAINER -->
<div id="container">

  <!-- SECTION 1 -->
  <div class="section current" id="section-1">Section1</div>
  <!-- SECTION 2 -->
  <div class="section" id="section-2">Section2</div>
  <!-- SECTION 3 -->
  <div class="section" id="section-3">Section3</div>
  <!-- SECTION 4 -->
  <div class="section" id="section-4">Section4</div>
  <!-- SECTION 5 -->
  <div class="section" id="section-5">Section5</div>

</div>

Answer 1

您可以通过以编程方式显示和隐藏div来实现此目的。看看这个工作解决方案的小提琴（用铬测试）：

http://jsfiddle.net/bHS93/1/

您只是将css样式应用于正确的div并保持最后的已知状态。你可以通过添加像jQuery这样的库的转换来实现这一点。记得更新eth

<!-- PREVIOUS / NEXT -->
<span id="go-prev">Previous</span> 
<span id="go-next">Next</span>

<!-- CONTAINER -->
<div id="container">
    <!-- SECTION 1 -->
    <div class="section current" id="section-1">Section1</div>
    <!-- SECTION 2 -->
    <div class="section" id="section-2">Section2</div>
    <!-- SECTION 3 -->
    <div class="section" id="section-3">Section3</div>
    <!-- SECTION 4 -->
    <div class="section" id="section-4">Section4</div>
    <!-- SECTION 5 -->
    <div class="section" id="section-5">Section5</div>
</div>

CSS

.section {
    display: none;
}
.current {
    display: block;
}

和JS

var prev = document.getElementById('go-prev'),
    next = document.getElementById('go-next'),
    pagination = (function () {
        var pages = [1, 2, 3, 4, 5], //the number of 'pages'
            current = 0;

        page = function (forward) {
            //reset visible div
            document.getElementById('section-' + (current + 1)).className = 'section';

            //traverse to the next one if we're not already at the beginning or end
            if (forward) {
                if (current < pages.length - 1) {
                    current++;
                }
            } else {
                if (current > 0) {
                    current--;
                }
            }

            document.getElementById('section-' + (current + 1)).className = 'section current';
        };
        return page;
    })();

prev.onclick = function () {
    pagination(false);
};
next.onclick = function () {
    pagination(true);
};

是否可以使用Previous或Next div进行上一个/下一个滚动？

1 个答案: