如何用JS和CSS实现带六边形导航的HTML头部自动轮播图？

Got it, let's build this hexagon-based carousel exactly as you described. We'll use HTML for structure, CSS for styling (including those hexagons), and JavaScript to handle the auto-rotation and click navigation. Here's a step-by-step breakdown:

We'll need a full-screen background container for the current active image, plus a container for the hexagon navigation elements. Each hexagon will hold an image that gets populated as the carousel rotates.

<div class="carousel-container">
  <!-- Background image (current active slide) -->
  <div class="carousel-background">
    <img src="img1.jpg" alt="Background slide" />
  </div>

  <!-- Hexagon navigation/preview container -->
  <div class="hexagon-container">
    <div class="hexagon" data-index="0">
      <img src="" alt="Hexagon slide" style="opacity: 0;" />
    </div>
    <div class="hexagon" data-index="1">
      <img src="" alt="Hexagon slide" style="opacity: 0;" />
    </div>
    <div class="hexagon" data-index="2">
      <img src="" alt="Hexagon slide" style="opacity: 0;" />
    </div>
    <div class="hexagon" data-index="3">
      <img src="" alt="Hexagon slide" style="opacity: 0;" />
    </div>
    <div class="hexagon" data-index="4">
      <img src="" alt="Hexagon slide" style="opacity: 0;" />
    </div>
    <div class="hexagon" data-index="5">
      <img src="" alt="Hexagon slide" style="opacity: 0;" />
    </div>
  </div>
</div>

First, we'll style the full-screen background, then create the hexagon shape using clip-path, and add smooth transitions for image changes.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.carousel-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* Background image styling */
.carousel-background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.carousel-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.8s ease;
}

/* Hexagon container layout */
.hexagon-container {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
}

/* Hexagon shape and styling */
.hexagon {
  width: 120px;
  height: 138px; /* Aspect ratio for regular hexagon */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.hexagon:hover {
  transform: scale(1.1);
}

.hexagon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.8s ease;
}

This is where we handle the auto-rotation, populate hexagons in order, and add click navigation. We'll make sure the first image starts on the background, then moves to the first hexagon, and so on in a loop.

// Define your image paths here
const images = [
  'img1.jpg',
  'img2.jpg',
  'img3.jpg',
  'img4.jpg',
  'img5.jpg',
  'img6.jpg'
];

// DOM elements
const backgroundImg = document.querySelector('.carousel-background img');
const hexagons = document.querySelectorAll('.hexagon');
const hexImgs = document.querySelectorAll('.hexagon img');

// State variables
let currentBgIndex = 0;
let currentHexIndex = 0;
let carouselTimer;
const rotationInterval = 3000; // 3 seconds per slide

// Initialize the carousel
function initCarousel() {
  // Set initial background image
  backgroundImg.src = images[currentBgIndex];
  // Start auto-rotation
  startAutoCarousel();
  // Add click event to hexagons
  hexagons.forEach(hex => {
    hex.addEventListener('click', handleHexClick);
  });
}

// Auto-rotation function
function startAutoCarousel() {
  carouselTimer = setInterval(() => {
    // Populate current hexagon with the current background image
    hexImgs[currentHexIndex].src = images[currentBgIndex];
    hexImgs[currentHexIndex].style.opacity = 1;

    // Move to next background image with smooth transition
    currentBgIndex = (currentBgIndex + 1) % images.length;
    backgroundImg.style.opacity = 0;
    setTimeout(() => {
      backgroundImg.src = images[currentBgIndex];
      backgroundImg.style.opacity = 1;
    }, 400);

    // Move to next hexagon in sequence
    currentHexIndex = (currentHexIndex + 1) % hexImgs.length;
  }, rotationInterval);
}

// Handle hexagon click navigation
function handleHexClick(e) {
  // Stop current auto-rotation
  clearInterval(carouselTimer);

  // Get the clicked hexagon's index and its image
  const clickedIndex = parseInt(e.currentTarget.dataset.index);
  const clickedImgSrc = hexImgs[clickedIndex].src;

  // Update background to the clicked hexagon's image
  currentBgIndex = images.findIndex(img => clickedImgSrc.includes(img));
  backgroundImg.style.opacity = 0;
  setTimeout(() => {
    backgroundImg.src = clickedImgSrc;
    backgroundImg.style.opacity = 1;
  }, 400);

  // Resume auto-rotation starting from the next hexagon
  currentHexIndex = (clickedIndex + 1) % hexImgs.length;
  startAutoCarousel();
}

// Start the carousel when the page loads
window.addEventListener('load', initCarousel);

Key Features Explained #

• Auto-Rotation Flow: The carousel starts with the first image on the background, then moves it to the first hexagon, loads the next image as background, and repeats this loop indefinitely.
• Click Navigation: Clicking any hexagon swaps its image to the background immediately, then resumes auto-rotation starting from the next hexagon in sequence.
• Smooth Transitions: We use CSS opacity transitions for both background and hexagon images to make changes feel seamless and avoid jarring jumps.
• Interactive Feedback: A subtle scale-up effect on hexagon hover tells users the elements are clickable.

Customization Tips #

• Replace the images array paths with your actual image URLs.
• Adjust rotationInterval to change how fast the carousel rotates (value in milliseconds).
• Modify hexagon size (width/height in .hexagon CSS) and gap (gap in .hexagon-container) to fit your design needs.

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