javascript - 为什么 css margin 在点击按钮时隐藏图像？

Question

我尝试使用next 和previous 按钮滚动我的图像。我使用 CSS 来做这件事。我正在设置 ul 的边距以获取下一张和上一张图像但是当我点击下一个按钮时，它会隐藏我的图像而不是显示下一个图像。你能告诉我如何显示下一张图片吗？

这是我的代码:

$(function() {
  $('#next').click(function() {
    alert('next');
    $('.outer ul').css('margin-left', '200px');
  });
  $('#pre').click(function() {
    alert('pre');
    $('.outer ul').css('margin-left', '-200px');
  });
});

.outer {
  width: 200px;
  overflow: hidden
}
.outer ul {
  width: 600px;
  margin: 0 auto 0 auto;
}
.outer li {
  display: inline-block;
  width: 195px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <ul>
    <li>
      <img alt="" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd">
    </li>
    <li>
      <img alt="" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT7lw5rwUWCsmOFSTUuFF84niMBZg6J9KeWhws1Ysib3VdVTM8-RA">
    </li>
    <li>
      <img alt="" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd">
    </li>

  </ul>
  <button id='pre'>
    previous
  </button>
  <button id='next'>
    next
  </button>

</div>

Answer 1

$(function(){
var nextprevmargin = 0;
$('#next').click(function(){
    nextprevmargin = parseInt(nextprevmargin) - 200;
    $('.outer ul').css('margin-left',nextprevmargin + 'px');
})
$('#pre').click(function(){
    nextprevmargin = parseInt(nextprevmargin) + 200;
    $('.outer ul').css('margin-left',nextprevmargin + 'px');
})

})

这是给你的 fiddle 。 https://jsfiddle.net/urLdLdLm/9/您必须添加计数器检查以防止滚动超出屏幕