0

http://jsfiddle.net/zdYzg/5/

我目前正在使用 Javascript 制作一个简单的画廊，使用键盘控制输入来移动画廊图像。jSFiddle 显示代码，但由于某种原因，滑块在 jSfiddle 上不起作用，但它在我的本地主机 MAMP 服务器上运行。

问题是我无法让网格中的图像停止垂直堆叠。我查看了 UL LI css，它似乎无法正常工作，并使 li 图像垂直浮动在每个图像的顶部。

我的另一个问题是，我如何告诉 Javascript 的 gridSize 变量为了响应式 Web 目的而改变，因为 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;
 }

我究竟做错了什么？谢谢。

4

0 回答 0