Question

我目前正在使用Javascript的简单图库，使用键盘控制输入来移动图库图像。 jSFiddle显示代码，但由于某种原因滑块不能在jSfiddle上运行，但它正在我的localhost MAMP服务器上运行。

问题是我无法让网格中的图像垂直堆叠。我看过UL LI css，似乎没有工作，让li图像垂直浮动在每个上面。

我的另一个问题是，我怎么能告诉Javascript的gridSize变量为响应式网络目的而改变，因为1100对于某些屏幕来说太大了？

滑块的Javascript。 $（window）.load（function（）{

 var image = $('img'); 
 var theWidth = image.width();
 var gridSize = -1100;
 var grid;
 var totalWidth = image.length * theWidth; 

$('ul.grid').css({ 
  width: function(){ 
  return totalWidth;     
}    
});

$('#back').click(function() {
if(gridSize - theWidth != -totalWidth) {
  grid = gridSize + 1100;
} else {
  grid = 0;
};
updatePosition();
});

$('#page').click(function(){
if(gridSize != 0) {
  grid = gridSize - 1100;
} else {
  grid =  0;
};
updatePosition();
});


var updatePosition = function() {
$('ul.grid').animate({ "margin-left": (grid)}, 650);
    gridSize = -1100;
}

$(document).keydown(function(e) {
if (e.keyCode == 39) {
    updatePosition();
}
else if (e.keyCode == 37) {
    grid = gridSize + 1100;
}
})

});

HTML

  <div class="grid-wrap">
   <ul class="grid">
    <li>
        <img src="http://f.cl.ly/items/363B3w2S0c3y22100R2D/img1.png">
    </li>
    <li>
        <img src="http://f.cl.ly/items/09110S1L2t2X0K0J1d1D/img2.png">
    </li>
    <li>
        <img src="http://f.cl.ly/items/0L152B400u0d0k1g2a1e/img3.png">
    </li>
    </ul>
 </div>

  <div id="btns">
     <div class="forward"></div>
     <div class="back"></div>
  </div>

CSS

  .grid-wrap {
     background: #FFF;
     margin: 0 auto;
     overflow: hidden;
     width: 600px;
 }
ul.grid li {
    display: inline;
    list-style: none;
 }

我做错了什么？感谢。

图库滑块垂直堆叠图像而不是水平堆叠+键盘输入不起作用

0 个答案: