jQuery + CSS |水平滚动

Question

我想让我的div水平滚动。我的div是100％，我希望整个div大小（100％）滚动显示更多的div。像这样：

我已经有按钮，告诉JS滚动+ 150％，但我不能正常工作。

现在，继承人的情况，我的div是100％，但是，在该div内，是一个800x500的图像，我想要在100 & div内的垂直/水平中心。

所以当我按下箭头时，我希望它将div1移动到div2，然后div2移动到div3 ... ect。

感谢

Here is my code

HTML：

<div class= "edge_container" data-stellar-ratio="3"> 

     <div class = "edge_wrapper"> 

      <div class="OLLIEJ_Welcome"> <!--id="stage0" data-slide="0">--> 
       Hello &amp; Test 
      </div> 

      <div class="EDGE_idea"> <!--id="stage1" data-slide="1">--> 
       IDEAS &amp; CONCEPTS 
      </div> 

      <div class="OLLIEJ_002"> <!--id="stage2" data-slide="2">--> 
       RESEARCH &amp; DEVELOPMENT 
      </div> 

      <div class="OLLIEJ_003"> <!--id="stage3" data-slide="3">--> 
       BUILD &amp; PRODUCTION 
      </div> 

     </div> 

    </div> 

CSS：

.edge_container{ 
    position:absolute; 
    height: 550px; 
    overflow: hidden; 
    width:100%; 
    white-space: nowrap; 


    display:block; 

    top: 50%; 
    margin-top: -250px; 

    background-color:#00FFFF; 
} 

.edge_wrapper{ 
    /*position:absolute;*/ 
    width: 300%; 
    white-space: nowrap; 
    vertical-align: top; 
    background-color:#3366FF; 

} 

.OLLIEJ_Welcome{ 
    height: 500px; 
    width: 800px; 
    display: inline-block; 
    white-space: normal; 
    margin-left: 50%; 
    left: -400px; 
    padding-left: 2px; 

} 

.EDGE_idea{ 
    height: 500px; 
    width: 800px; 

    display: inline-block; 
    white-space: normal; 
    margin-left: 50%; 
    left: -400px; 
    padding-left: 2px; 

} 


.OLLIEJ_002{ 
    height: 500px; 
    width: 800px; 
    display: inline-block; 
    white-space: normal; 
    margin-left: 50%; 
    left: -400px; 
    padding-left: 2px; 
} 


.OLLIEJ_003{ 
    height: 500px; 
    width: 800px; 

    display: inline-block; 
    white-space: normal; 
    margin-left: 50%; 
    left: -400px; 
    padding-left: 2px; 

} 

JS：

button_right_0.click(function (e) { 
     //dataslide = $(this).attr('data-slide'); 

     if(horSlide_0 < 3){ 
      console.debug("Button Pressed"); 
      $('.edge_wrapper').animate({marginLeft: '-=100%'},1000, 'easeInOutQuint'); 
      //horSlide_0 ++; 
     } 
     //hideButtons(dataslide); 

    }); 

Answer 1

您需要有两个div元素。第一个作为掩码，仅显示您希望的内容（即每张幻灯片）。然后在里面有另一个div，它包含所有的元素。像这样的东西应该为你的工作需要：

<div id="slider_mask"> 
    <div id="slider_content"> 
     <img src="src/to/img1.jpg" /> 
     <img src="src/to/img2.jpg" /> 
    </div> 
</div> 

你的CSS应该是这个样子（你可以使用jQuery来计算#slider_content整体宽度，基于它的子节点的outerWidth()：

#slider_mask { 
    width: 100%; 
    height: 500px; 
    overflow: hidden; 
    position: relative; 
} 

#slider_content { 
    width: 2400px; /* 800 * 3 */ 
    height: 500px; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
    #slider_content img { 
     width: 800px; 
     height: 500px; 
     float: left; 
    } 

现在用你的标记，你可以通过jQuery处理keypress事件，以动画的#slider_contentleft属性：

var curr_left = 0, 
     content = $('#slider_content'); 

$(window).keyup(function(e) { 
    // Right arrow key: 
    if(e.which == 39) 
    { 
     // Animate to the left if it's not already set: 
     if(curr_left <= 0 && curr_left > -1600) 
     { 
      content.animate({ 'left': (curr_left - 800) }, 'fast', function() { 
       curr_left -= 800 
      }); 
     } 
    } 

    // Left arrow key: 
    else if(e.which == 37) 
    { 
     if(curr_left < 0) 
     { 
      content.animate({ 'left': (curr_left + 800) }, 'fast', function() { 
       curr_left += 800 
      }); 
     } 
    } 
});​ 

我已经把一个快速的jsfiddle向您展示一个工作示例： http://jsfiddle.net/Y2Ese/