js图片轮播带悬停特效

基础概念

JavaScript图片轮播是一种网页设计技术，用于在网页上自动或手动切换显示不同的图片。悬停特效通常指的是当用户将鼠标悬停在某个元素上时触发的视觉效果。结合这两种技术，可以实现一个既自动轮播图片，又在鼠标悬停时暂停轮播并显示额外信息的交互式图片展示。

类型

自动轮播：图片按照设定的时间间隔自动切换。
手动轮播：用户通过点击按钮来切换图片。
悬停暂停：鼠标悬停在图片上时，轮播暂停。

应用场景

产品展示页：用于展示多个产品的图片和信息。
新闻动态：在首页展示最新的新闻标题和摘要。
广告宣传：在网站的显眼位置展示广告图片。

示例代码

以下是一个简单的JavaScript图片轮播带悬停特效的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style>
  .carousel {
    position: relative;
    width: 600px;
    height: 400px;
    overflow: hidden;
  }
  .carousel img {
    position: absolute;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }
  .carousel img.active {
    opacity: 1;
  }
</style>
</head>
<body>

<div class="carousel" onmouseover="pauseCarousel()" onmouseout="startCarousel()">
  <img src="image1.jpg" alt="Image 1" class="active">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

<script>
  let carouselInterval;
  const carousel = document.querySelector('.carousel');
  const images = carousel.querySelectorAll('img');

  function startCarousel() {
    carouselInterval = setInterval(() => {
      const activeImage = carousel.querySelector('img.active');
      const nextImage = activeImage.nextElementSibling || images[0];
      activeImage.classList.remove('active');
      nextImage.classList.add('active');
    }, 3000);
  }

  function pauseCarousel() {
    clearInterval(carouselInterval);
  }

  startCarousel();
</script>

</body>
</html>