如何实现网页两侧区域鼠标指针变为方向箭头（轮播导航类）？

下面是一套适合基础HTML/CSS水平的实现方案，完全通过鼠标指针变化引导用户切换轮播内容：

1. HTML 结构 #

先搭建核心的轮播容器，包含左右触发区域和轮播内容：

<div class="carousel">
  <!-- 左侧切换触发区 -->
  <div class="carousel-trigger carousel-trigger-left"></div>
  <!-- 轮播内容容器 -->
  <div class="carousel-content">
    <img src="portfolio-1.jpg" alt="作品1" class="carousel-item">
    <img src="portfolio-2.jpg" alt="作品2" class="carousel-item">
    <img src="portfolio-3.jpg" alt="作品3" class="carousel-item">
  </div>
  <!-- 右侧切换触发区 -->
  <div class="carousel-trigger carousel-trigger-right"></div>
</div>

2. CSS 样式 #

核心是设置两侧触发区的覆盖范围和指针样式，同时实现轮播内容的基础布局：

/* 轮播容器：相对定位作为触发区的基准 */
.carousel {
  position: relative;
  max-width: 900px; /* 按需调整轮播宽度 */
  margin: 2rem auto;
  overflow: hidden;
}

/* 触发区：绝对定位覆盖轮播两侧 */
.carousel-trigger {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 15%; /* 两侧触发区域的宽度，可根据需求调整 */
  z-index: 10; /* 确保触发区在图片上方，能接收点击/鼠标事件 */
}

/* 左侧触发区：鼠标悬停显示左箭头指针 */
.carousel-trigger-left {
  left: 0;
  cursor: w-resize;
}

/* 右侧触发区：鼠标悬停显示右箭头指针 */
.carousel-trigger-right {
  right: 0;
  cursor: e-resize;
}

/* 轮播内容容器：横向排列，超出隐藏 */
.carousel-content {
  display: flex;
  transition: transform 0.4s ease; /* 平滑切换动画 */
}

/* 轮播项：占满容器宽度 */
.carousel-item {
  min-width: 100%;
  height: auto;
}

3. JavaScript 切换逻辑 #

添加基础的点击切换功能，实现轮播内容的左右滑动：

const carousel = document.querySelector('.carousel');
const leftTrigger = carousel.querySelector('.carousel-trigger-left');
const rightTrigger = carousel.querySelector('.carousel-trigger-right');
const content = carousel.querySelector('.carousel-content');
const itemCount = document.querySelectorAll('.carousel-item').length;
let currentSlide = 0;

// 切换到上一张
leftTrigger.addEventListener('click', () => {
  currentSlide = (currentSlide - 1 + itemCount) % itemCount;
  updateSlidePosition();
});

// 切换到下一张
rightTrigger.addEventListener('click', () => {
  currentSlide = (currentSlide + 1) % itemCount;
  updateSlidePosition();
});

// 更新轮播内容的位置
function updateSlidePosition() {
  const translateValue = `translateX(-${currentSlide * 100}%)`;
  content.style.transform = translateValue;
}

关键说明 #

• 触发区是透明的，不会影响轮播图的视觉效果，仅在鼠标移入时通过指针变化提示可操作
• cursor: w-resize 和 cursor: e-resize 是原生的箭头样式，无需额外图标
• 可以通过调整 .carousel-trigger 的 width 属性，改变触发区域的大小
• 如果需要自动轮播，可以添加定时器逻辑，基础版先实现手动切换即可

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