滑块左右滑动时.banner透明度无法增加的问题修复求助

我有一个滑块，希望实现以下交互效果：当滑块向左滑动时，降低.banner元素的透明度并将其隐藏；当滑块向右滑动时，提高.banner元素的透明度并使其重新显示。但目前我的代码仅能实现透明度降低的效果，无法完成透明度提升，请问该如何修复？

问题根源 #

• 透明度值类型错误：banner.style.opacity返回字符串类型，直接使用+=/-=会触发字符串拼接而非数值运算，导致透明度值异常。
• 提升条件过于严苛：原代码仅在透明度精确等于0时才允许提升，但实际滑动中透明度是逐步变化的，该条件几乎无法触发。
• 缺少边界控制：未限制透明度在0-1的合理范围，可能出现超出预期的数值。

修复后的代码 #

JavaScript #

let sliderContainer = document.querySelector(".slider-container");
let innerSlider = document.querySelector(".inner-slider");
let banner = document.querySelector(".banner");

let pressed = false;
let startX;
let x;
// 转换为数值类型存储透明度，避免字符串运算问题
let bannerOpacity = parseFloat(banner.style.opacity);
let oldx = 0;

sliderContainer.addEventListener("mousedown", (e) => {
  pressed = true;
  startX = e.offsetX - innerSlider.offsetLeft;
  sliderContainer.style.cursor = "grabbing";
});

sliderContainer.addEventListener("mouseleave", () => {
  sliderContainer.style.cursor = "default";
});

sliderContainer.addEventListener("mouseup", () => {
  sliderContainer.style.cursor = "grab";
  pressed = false;
});

window.addEventListener("mouseup", () => {
  pressed = false;
});

sliderContainer.addEventListener("mousemove", (e) => {
  if (!pressed) return;

  const isRightSlide = e.pageX > oldx;
  const isLeftSlide = e.pageX < oldx;

  if (isRightSlide) {
    // 向右滑动：提升透明度，上限设为1
    bannerOpacity = Math.min(bannerOpacity + 0.01, 1);
    banner.style.opacity = bannerOpacity;
  } else if (isLeftSlide) {
    // 向左滑动：降低透明度，下限设为0
    bannerOpacity = Math.max(bannerOpacity - 0.01, 0);
    banner.style.opacity = bannerOpacity;
  }

  e.preventDefault();
  x = e.offsetX;
  innerSlider.style.left = `${x - startX}px`;
  oldx = e.pageX;
  checkBoundary();
});

const checkBoundary = () => {
  let outer = sliderContainer.getBoundingClientRect();
  let inner = innerSlider.getBoundingClientRect();

  if (parseInt(innerSlider.style.left) > 150) {
    innerSlider.style.left = "150px"; // 直接设置边界值，提升滑动流畅度
  }

  if (inner.right < outer.right) {
    innerSlider.style.left = `-${inner.width - outer.width}px`;
  }
};

CSS（无需修改） #

.card {
  height: 300px;
  width: 400px;
  border-radius: 5px;
}

.banner {
  z-index: 2;
  height: 300px;
  width: 200px;
  border-radius: 5px;
  background-color: red;
}

.card:nth-child(odd) {
  background-color: blue;
}

.card:nth-child(even) {
  background-color: rgb(0, 183, 255);
}

.slider-container {
  width: 80%;
  height: 350px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.inner-slider {
  width: 150%;
  display: flex;
  gap: 10px;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 250px;
}

HTML（无需修改） #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body>
  <div class="slider-container">
    <div class="banner" style="opacity: 1;"></div>
    <div class="inner-slider">
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
    </div>
  </div>
</body>

</html>

关键修改说明 #

1. 将bannerOpacity初始值通过parseFloat()转换为数值类型，确保后续运算为数值操作。
2. 移除提升透明度的苛刻条件，只要向右滑动就逐步提升透明度。
3. 使用Math.min()和Math.max()限制透明度在0-1的合理范围内。
4. 优化滑块边界判断逻辑，直接设置边界值，提升滑动流畅度。

内容的提问来源于stack exchange，提问作者Mike