如何在Fullpage.js中阻止第4屏滚轮切换并实现图片交互

Got it, let's break down how to implement this exact requirement with Fullpage.js. The key is to use Fullpage's built-in hooks to intercept scroll events on section 4, handle the image switch first, and only allow section navigation once the image cycle is complete.

Step 1: HTML Structure #

First, set up your sections, with section 4 containing two image containers (we'll toggle their visibility):

<div id="fullpage">
  <div class="section">
    <h1>Section 1</h1>
  </div>
  <div class="section">
    <h1>Section 2</h1>
  </div>
  <div class="section">
    <h1>Section 3</h1>
  </div>
  <div class="section" id="section4">
    <div class="section4-image active">
      <img src="your-image-1.jpg" alt="Image 1">
    </div>
    <div class="section4-image">
      <img src="your-image-2.jpg" alt="Image 2">
    </div>
  </div>
  <div class="section">
    <h1>Section 5</h1>
  </div>
</div>

Step 2: CSS for Image Toggling #

Style the images to fill the section, and only show the active one by default with smooth transitions:

.section4-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.section4-image.active {
  opacity: 1;
  visibility: visible;
}
.section4-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Step 3: JavaScript Implementation #

We'll use Fullpage's onLeave hook to intercept section navigation, and a state variable to track which image is active in section 4.

// Track current active image in section 4 (1 = first image, 2 = second)
let currentSection4Image = 1;

// Initialize Fullpage.js
new fullpage('#fullpage', {
  // Basic Fullpage config (adjust as needed)
  navigation: true,
  scrollBar: false,
  responsiveWidth: 900,

  // Hook triggered when leaving a section
  onLeave: function(origin, destination, direction) {
    // Only handle section 4 (origin.index is 3 since sections are 0-indexed)
    if (origin.index === 3) {
      if (direction === 'down') {
        // Scrolling down from section 4
        if (currentSection4Image === 1) {
          // Switch to second image, prevent section change
          toggleSection4Images(2);
          return false; // Block Fullpage's default section navigation
        }
        // If already on second image, allow navigation to section 5
        return true;
      } else if (direction === 'up') {
        // Scrolling up from section 4
        if (currentSection4Image === 2) {
          // Switch back to first image, prevent section change
          toggleSection4Images(1);
          return false;
        }
        // If already on first image, allow navigation to section 3
        return true;
      }
    }

    // For all other sections, allow normal navigation
    return true;
  },

  // Hook triggered after loading a section
  afterLoad: function(origin, destination, direction) {
    // Reset section 4 to first image when we enter it
    if (destination.index === 3) {
      toggleSection4Images(1);
    }
  }
});

// Helper function to toggle active image in section 4
function toggleSection4Images(targetImage) {
  // Remove active class from all images
  document.querySelectorAll('.section4-image').forEach(img => {
    img.classList.remove('active');
  });

  // Add active class to target image
  document.querySelectorAll('.section4-image')[targetImage - 1].classList.add('active');

  // Update state variable
  currentSection4Image = targetImage;
}

How It Works #

• State Tracking: The currentSection4Image variable keeps track of which image is currently displayed in section 4.
• On Leave Interception: When leaving section 4, we check the scroll direction and current image state. If we need to switch images first, we call toggleSection4Images and return false to block Fullpage's default section switch.
• After Load Reset: When entering section 4 (from any direction), we reset it to show the first image.
• Smooth Transitions: The CSS transitions ensure the image switch is smooth instead of abrupt.

Quick Notes #

• Make sure you've included the Fullpage.js library in your project before this script runs.
• Adjust the transition duration in CSS to match your desired animation speed.
• If you're using the jQuery version of Fullpage.js, the initialization syntax will be $('#fullpage').fullpage({ ... }), but the core logic stays identical.

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