Question

我正在学习jQuery，尝试制作滑条，但我几乎做到了，但是我遇到了问题，在2次滑条穿过图像后，第一个图像没有出现。我当时在使用左边距使图像移动。

$(document).ready(function() {
  $('#btn').on('click', function() {
    if ($('.slides').css('margin-left') === '-3600px') {
      $('.slides').animate({
        'margin-left': -0.05
      });
    } else {
      $('.slides').animate({
        'margin-left': '-=720'
      });
    }
  });
});

Answer 1

您好，Aslan，欢迎来到Stack Overflow。由于我没有直观地演示该问题，因此我假设您所有图像的图像宽度均为720像素，并且您要相邻显示5张图片。

在您的第一次迭代中，您的margin-left为0。

单击按钮1-> margin-left: 720px;
单击按钮2-> margin-left: 1440px;
单击按钮3-> margin-left: 2160px;
单击按钮4-> margin-left: 2880px;
单击按钮5-> margin-left: 3600px;

现在，再次单击该按钮，然后将滚动条移回到其位置，该位置现在不在margin: 0，而是在margin: -0.05。我们开始迭代2 ：

单击按钮1-> margin-left: 719.95px;
单击按钮2-> margin-left: 1439.95px;
单击按钮3-> margin-left: 2159.95px;
单击按钮4-> margin-left: 2879.95px;
单击按钮5-> margin-left: 3599.95px;

但是您检查左边距是否为3600 ，而不是3599.95。

向后滚动时，您需要设置margin-left: 0或查询3599或更高的左边距：

if ($('.slides').css('margin-left') >= '3599px') {
  $('.slides').animate({
        'margin-left': -0.05
      });
}

如果操作员无需重新加载页面就可以工作？ JS

1 个答案: