滑動右邊的div使用jQuery

Question

我在做一個網站，我有多個頁面左側。我希望他們不是一個不同的網頁，但要在同一頁上成爲不同的div。然後，我有兩個左右按鈕，當用戶點擊特定的div時，它應該按照箭頭向左或向右滑動。我怎樣才能做到這一點與jQuery，HTML，CSS？

我的div：

<div id="main-page">  
</div> 
<div id="about-us"> 
</div> 
<div id="contact-us"> 
</div> 

的div有一個特定的背景圖像，以及它們的大小是全屏。

我的腳本：

$("#main-page").click(function() { 
    $("#main-page").hide("slide", {direction: "left"}, 1000); 
    $("#about-us").show("slide", {direction: "right"}, 1000); 
}); 

正如我所說的，我不想做這樣的。我想要箭頭來檢查哪些div向左或向右滑動。

Answer 1

HTML

<div id="wrapper"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
</div> 
<input type="button" class="next" value="Next"> 
<input type="button" class="prev" value="Prev"> 

CSS

#wrapper { 
    white-space: nowrap; 
    width: 1500px 
} 

.box { 
    width: 200px; 
    height: 200px; 
    border: thin solid red; 
    margin: 0 10px 0 0; 
    display: inline-block 
} 

​.prev, 
.next { position: fixed; top: 50% } 

.prev { left: 0 } 
.next { right: 0 } 

JS

$(function() { 
    // We create an array and populate 
    // it with all .box left offsets 
    var boxLefts = []; 
    $('.box').each(function(i, el) { 
     boxLefts.push(this.offsetLeft); 
    }); 

    // Now we attach an on click event handler 
    // to our prev/next buttons 
    $(".prev, .next").click(function(e) { 
     var dir = false, 
      targetLeft = -1; 

     // to get the current direction 
     // we use the className of the current clicked button 
     var target = e.target.className; 

     // we set the earlier defined direction variable 
     // based on the clicked button 
     if (target == 'next') { 
      dir = 1; 
     } else { 
      dir = -1; 
     } 

     // when the next-button is clicked 
     // we loop through the .box-offsets array 
     if (dir) { 
      // prevent the default onclick behaviour 
      e.preventDefault(); 

      // get the current scroll-offset 
      winLeft = window.scrollX; 

      $.each(boxLefts, function(i, v) { 
       // we check that we are not at the end or beginning 
       // of the viewport. If we are not 
       // we set targetLeft to the current/matching offsets-array item. 
       if ((dir == 1 && winLeft < v && targetLeft < 0) || (dir == -1 && winLeft > v)) { 
        targetLeft = v; 
       } 
      }); 

      // if truthy we animate the scrolling to the next/previous box-offset 
      if (!targetLeft) { 
       $('html:not(:animated), body:not(:animated)').stop().animate({ 
        scrollLeft: targetLeft 
       }, 1000); 
      } 
     } 

     // prevent the default onclick behaviour 
     return false; 
    }); 
}); 

Demo

Answer 2

這可能是這樣的：

<div class='container'> 
    <div class='all-pages'> 
     <div class='page' id='page-1'>PAGE 1</div> 
     <div class='page' id='page-2'>PAGE 2</div> 
     <div class='page' id='page-3'>PAGE 3</div> 
     <div class='page' id='page-4'>PAGE 4</div> 
    </div> 
</div> 

.container { 
    width: 960px; 
    overflow: hidden; 
    position: relative; 
} 

.all-pages { 
    float:left; 
    width: 10000px; 
    position: relative; 
    left: 0; 
    top:0; 
} 

.page { 
    float: left; 
    width: 960px; 
} 

在本質上，它的原理是一樣的的jCarousel，除非你是立足於規模較大的元素的定位和寬度使每個項目填寫頁面：

• container - 可視區域

• all-pages - 所有的實際上是一個 '卷軸'頁面

接下來，您需要向頁面（或菜單？）添加左右按鈕以滾動顯示。這些必須被絕對定位，以便它保持在容器視圖內。

當您的左右按鍵增加功能，你只需要使用一個jQuery動畫風格功能改變的所有網頁DIV，這將創造一個平穩過渡尋找內留下的價值。