JavaScript实现鼠标悬停连续调整外边距的滑块教程

left.onmouseover = function() {
  var currentLeftMargin = getComputedStyle(slide).marginLeft;
  slide.style.marginLeft = (parseInt(currentLeftMargin, 10) - 900) + "px";
}

<div class="slide-container">
  <div class="left"></div>
  <div class="right"></div>
  <div class="slider">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
  <div class="fade"></div>
</div>

.slide-container {
  height: 300px;
  width: 100%;
  background-color: blue;
  position: relative;
  overflow: hidden; /* 隐藏超出容器的内容 */
}

.left, .right {
  position: absolute;
  height: 20px;
  width: 20px;
  background-color: red;
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
  z-index: 10; /* 确保按钮在滑块之上 */
}

.left {
  left: 0;
}

.right {
  right: 0;
}

.slider {
  height: 300px;
  width: 100%;
  display: flex; /* 使用Flexbox布局内部item */
  position: relative; /* 允许marginLeft属性生效 */
  left: 0; /* 初始位置 */

  /* 关键：设置CSS过渡效果，使margin变化平滑 */
  transition: margin-left ease 0.25s; 
}

.item {
  display: block;
  height: 300px;
  width: 300px;
  min-width: 300px; /* 确保item宽度固定 */
  background-color: green;
  margin-left: 10px; /* item之间的间隔 */
  flex-shrink: 0; /* 防止item收缩 */
  display: flex; /* 居中内容 */
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 2em;
}

// 获取DOM元素
var left = document.querySelector(".left");
var right = document.querySelector(".right");
var slide = document.querySelector(".slider");

// 配置动画参数
let steps = 50; // 每次调整的像素量
let interval = 100; // 调整间隔的毫秒数
let iId; // 用于存储setInterval的ID，以便后续清除

// 左侧按钮的事件监听
left.onmouseover = function() {
  // 当鼠标悬停时，启动一个定时器
  iId = setInterval(() => {
    var currentLeftMargin = getComputedStyle(slide).marginLeft;
    // 获取当前外边距，解析为整数，然后增加步长
    slide.style.marginLeft = (parseInt(currentLeftMargin, 10) + steps) + "px";
  }, interval);
};

// 当鼠标移开左侧按钮时，清除定时器
left.onmouseout = () => {
  clearInterval(iId);
};

// 右侧按钮的事件监听
right.onmouseover = function() {
  // 当鼠标悬停时，启动一个定时器
  iId = setInterval(() => {
    var currentLeftMargin = getComputedStyle(slide).marginLeft;
    // 获取当前外边距，解析为整数，然后减少步长
    slide.style.marginLeft = (parseInt(currentLeftMargin, 10) - steps) + "px";
  }, interval);
};

// 当鼠标移开右侧按钮时，清除定时器
right.onmouseout = () => {
  clearInterval(iId);
};