js怎么设置滑动图片鼠标停止

JS 怎么设置滑动图片鼠标停止

在网页中实现滑动图片的效果并且在鼠标悬停时停止滑动，可以通过JavaScript来实现。使用定时器控制滑动、监听鼠标事件、在悬停时清除定时器。本文将详细介绍如何使用JavaScript和CSS来实现这一功能，并提供代码示例。

一、初始化滑动效果

首先，我们需要设置基本的HTML和CSS来实现图片滑动的效果。图片可以在一个容器内水平滑动。为了实现这一效果，我们可以使用CSS的overflow属性和一个简单的JavaScript定时器。

HTML 结构

<div class="slider-container">
  <div class="slider">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <!-- 添加更多图片 -->
  </div>
</div>

CSS 样式

.slider-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.slider {
  display: flex;
  width: max-content;
  animation: slide 10s linear infinite;
}
.slider img {
  width: 100%;
  display: block;
}
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

二、使用JavaScript控制滑动

我们需要使用JavaScript来控制滑动效果，并在鼠标悬停时停止滑动。以下是实现这一功能的步骤。

定义滑动定时器

首先，我们定义一个定时器来控制滑动效果。这个定时器会不断地改变图片容器的transform属性，从而实现滑动效果。

let slider = document.querySelector('.slider');
let isHovered = false;
let slideInterval;
function startSliding() {
  slideInterval = setInterval(() => {
    let currentTransform = getComputedStyle(slider).transform;
    let matrix = new WebKitCSSMatrix(currentTransform);
    let currentX = matrix.m41;
    slider.style.transform = `translateX(${currentX - 1}px)`;
  }, 10);
}

停止滑动

我们需要监听鼠标进入和离开事件，在悬停时停止滑动，在离开时重新开始滑动。

slider.addEventListener('mouseenter', () => {
  clearInterval(slideInterval);
  isHovered = true;
});
slider.addEventListener('mouseleave', () => {
  if (isHovered) {
    startSliding();
    isHovered = false;
  }
});

三、优化滑动效果

为了实现更平滑的滑动效果，我们可以使用requestAnimationFrame代替定时器。

let slider = document.querySelector('.slider');
let isHovered = false;
let startTime;
function slide(timestamp) {
  if (!startTime) startTime = timestamp;
  let progress = timestamp - startTime;
  slider.style.transform = `translateX(${-progress / 10}px)`;
  if (!isHovered) {
    requestAnimationFrame(slide);
  }
}
slider.addEventListener('mouseenter', () => {
  isHovered = true;
});
slider.addEventListener('mouseleave', () => {
  if (isHovered) {
    startTime = null;
    isHovered = false;
    requestAnimationFrame(slide);
  }
});
requestAnimationFrame(slide);

四、处理图片无限循环

为了实现图片的无限循环，我们需要在滑动到末尾时将图片容器的位置重置。

let slider = document.querySelector('.slider');
let isHovered = false;
let startTime;
let totalWidth = slider.scrollWidth;
function slide(timestamp) {
  if (!startTime) startTime = timestamp;
  let progress = (timestamp - startTime) % totalWidth;
  slider.style.transform = `translateX(${-progress}px)`;
  if (!isHovered) {
    requestAnimationFrame(slide);
  }
}
slider.addEventListener('mouseenter', () => {
  isHovered = true;
});
slider.addEventListener('mouseleave', () => {
  if (isHovered) {
    startTime = null;
    isHovered = false;
    requestAnimationFrame(slide);
  }
});
requestAnimationFrame(slide);

五、使用项目管理系统

在开发团队中，项目管理系统是不可或缺的工具。对于研发项目管理，我们推荐研发项目管理系统PingCode，它可以帮助团队更好地规划和跟踪项目进度。而对于通用项目协作，Worktile是一个非常好的选择，能够提高团队的协作效率。

结论

通过上述步骤，我们可以使用JavaScript和CSS实现滑动图片鼠标停止的效果。使用定时器控制滑动、监听鼠标事件、在悬停时清除定时器是实现这一功能的关键。此外，使用requestAnimationFrame可以进一步优化滑动效果，使其更加平滑。在开发过程中，使用项目管理系统如PingCode和Worktile，可以大大提高团队的协作效率和项目管理的精确度。