时间戳

首页 > 解决方案 > 如何使操作员在不重新加载页面的情况下工作？JS

javascript - 如何使操作员在不重新加载页面的情况下工作？JS

问题描述

我正在学习 jQuery，试图制作滑块，我几乎做到了，但我遇到了问题，在 2 次滑块通过图像后，第一个图像没有出现。我正在使用 margin-left 使图像移动。

$(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'
      });
    }
  });
});

标签： javascriptjquery

解决方案

你好 Aslan，欢迎来到 Stack Overflow。由于我没有该问题的视觉演示，我假设您的所有图像的图像宽度为 720 像素，并且您希望显示 5 张图片并排显示。

在您的第一次迭代中，您的 amargin-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
      });
}

推荐阅读