简单的一页水平滚动

所以我帮了你一些忙。

基本上，我制作了一个非常简单的转换代码，希望您能理解。我写了一些评论，这样你就可以知道代码中发生了什么。

如果你只是从上到下完整地阅读而不跳过，那么评论应该是非常有解释性的。我所做的是找到你所有滑块的id，并将它们放在一个数组中。我使用javascript中html对象的.style访问器设置了它们的样式，并更改了它们的"display"属性。接下来是函数，它只需偏移位置，使上一个滑块不可见，而最新的滑块可见。

var prev = document.getElementById('prev');
var next = document.getElementById('next');
// First I made a variable that contains all the sliders(paragraphs) you have. 
var slide1 = document.getElementById('slide1'),
    slide2 = document.getElementById('slide2'),
    slide3 = document.getElementById('slide3');
// Using these sliders, I placed them into a more convenient data collection, an array called sections
var sections = [slide1, slide2, slide3],
    sectionPosition = 0;// We had to give it an index, so we know what slider we're on
// In javascript, once you have saved an html object you can access it's "style" attributes with the .style accessor and change it like so
for( i = 1; i < sections.length; i ++ ){
       sections[i].style.display = "none";// make all sliders invisible   
}
slide1.style.display = "initial";// We're going to leave the first one in it's initial state

// Since we don't want to rewrite code, let's make a generic function that can do the switching for us -- also it's always good to use less ambiguis functions. 
var nextParagraph = function(change){
    var prevParagraph = sections[ sectionPosition ];// get the slide that's being changed
    // We want to increment or decrement the index by x amount, so lets make sure it loops through the index correctly staying within a correct range.
    sectionPosition = (sectionPosition + change) % sections.length;//% is a modulu operator used for cycling numbers 
    if( sectionPosition < 0 ){
        sectionPosition += sections.length;
    }
    // this line basically sets the previous one to inivisble and makes the current slide visible
    var currentParagraph = sections[ sectionPosition ];
    prevParagraph.style.display = "none";
    currentParagraph.style.display = "initial";
}
prev.addEventListener('click', function(){nextParagraph(-1);} );
next.addEventListener('click', function(){nextParagraph(1);});

请注意，我通常不使用Java，但这是您想要的简单形式！

我做了你想要的最基本的东西。我建议你尝试添加以下内容，看看如何完成：

• 与其像我那样将滑块硬编码到数组中，不如看看是否可以（提示）获取滑块的类并将所有类添加到数组中
• 为滑块制作动画（Jquery是一个很好的学习方法）

工作演示

你也可以试试，它使用了Jquery的轻微破解，但我认为它更短。另外，请将a元素更改为按钮。a元素专门用于重定向到另一个页面时使用。如果您正在动态更改页面上的内容，请使用按钮。你不想使用的原因有很多

  <script>
  $(document).ready(function(){
var i = 0;
var pArray=["#slide1", "#slide2", "#slide3"]
$("#next").click(function(){
    var j;
    if(i == 2){
        j = 0;
    }else{
        j= i+1;
    }
    $(pArray[i]).css("display", "none");
    $(pArray[j]).css("display", "block");
    i++;
    if(i == 3){
        i = 0;
    }
})
 $("#prev").click(function(){
    var j;
    if(i == 0){
        j = 2;
    }else{
        j= i - 1;
    }
    $(pArray[i]).css("display", "none");
    $(pArray[j]).css("display", "block");
    i--;
    if(i == -1){
        i = 2;
    }
})
  })
  </script>