簡單的一頁水平滾動？

Question

我正在嘗試為一頁網站創建一個非常簡單的水平滾動動畫（示例）。 我基本上希望一次顯示一個段落，然后單擊向左和向右箭頭將分別水平滾動到上一個和下一個段落。

我一直在努力，但是我不確定如何一次只顯示一個段落，以及如何在它們之間進行切換（我知道我需要在箭頭上添加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
});

這是一個jsfiddle，如果有幫助的話。 任何指針將不勝感激。

編輯：我目前不使用jQuery，但我不反對它。

Answer 1

因此，我對您的小提琴做了一些幫助。

基本上，我編寫了一個非常簡單的過渡代碼，希望您能理解。 我寫了一些注釋，所以您會知道代碼中發生了什么。

如果您只是從上至下完全閱讀而沒有跳過，則注釋應具有很好的解釋性。 我所做的就是找到所有滑塊的ID，並將它們放在數組中。 我使用.style acessor為javascript中的html對象設置了它們的樣式，並更改了它們的“顯示”屬性。 接下來是函數，該函數僅偏移位置並使上一個滑塊不可見，而最新的滑塊可見。

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是一件很棒的事情）

工作演示

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 個解決方案

解決方案1
0 2015-03-26 06:06:58

解決方案2
0 2015-03-26 06:09:37

簡單的一頁水平滾動？

問題描述

2 個解決方案

解決方案1 0 2015-03-26 06:06:58

解決方案2 0 2015-03-26 06:09:37

解決方案1
0 2015-03-26 06:06:58

解決方案2
0 2015-03-26 06:09:37