Question

我试图为单页网站（example）创建一个非常简单的水平滚动动画。我基本上希望一次显示一个段落，单击左右箭头将分别水平滚动到上一段和下一段。

我一直在努力，但我不确定如何一次只显示一个段落以及我将如何在它们之间切换（我明白我需要将click eventListeners添加到箭头中，但我不确定如何使它们工作。

以下是我目前编码的内容：

HTML：

<body>
  <div class="wrapper">
    <p id="slide1" class="slide">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.</p>

    <p id="slide2" class="slide">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.</p>

    <p id="slide3" class="slide">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.</p>

    <a id="prev">←</a>
    <a id="next">→</a>
  </div>
</body>

CSS：

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

.wrapper {
  width: 960px;
  margin: 0 auto;
  font-family: 'Open Sans';
}

#prev, #next {
  padding: 10px 20px;
  background-color: #efefef;
  color: #c2c2c2;
  transition: background .2s ease-in-out;
}

#prev:hover, #next:hover {
  background: #dedede;
  cursor: pointer;
}

#prev {
  float: left;
}

#next {
  float: right;
}

JavaScript：

var prev = document.getElementById('prev');
var next = document.getElementById('next');

prev.addEventListener('click', function() {
  // Somehow make this go to the previous paragraph
});

next.addEventListener('click', function() {
  // Somehow make this go to the next paragraph
});

here如果有帮助的话，那就是jsfiddle。任何指针都将非常感激。

编辑：我目前没有使用jQuery，但我并不反对。

Answer 1

所以我为你的小提琴做了些事来帮助你。

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

如果您只是从上到下完全阅读而不跳过，则评论应该非常明确。我所做的是找到所有滑块的ID，并将它们放在一个数组中。我使用javascript中的html对象的.style acessor设置样式，并更改了它们的“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对于这样的事情来说是一件好事）

Working DEMO

Answer 2

你也可以尝试一下，它使用Jquery的轻微破解，但我认为它更短。还请将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>

简单的单页水平滚动？

2 个答案: