如何用纯JavaScript实现点击锚点箭头横向滚动Div内图片

Got it, let’s build this horizontal image scroller with vanilla JavaScript—no jQuery required! First, let’s fix up your existing HTML (there are a couple of unclosed tags), then add the necessary CSS to get the layout right, and finally implement the scroll functionality with plain JS.

Fix the HTML First #

Your original code has a couple of syntax errors (unclosed div and a tags). Here’s the corrected version with visible arrow characters for clarity (you can swap these with icons or CSS pseudo-elements later):

<div class="ImageContainer">
  <a id="prevPageButton" href="#" class="prevPageButton" role="button">&lt;</a>
  <div class="SKUImages-wrapper">
    <img itemprop="image" id="Image1" src="01.jpg" alt="Product image 1" />
    <img itemprop="image" id="Image2" src="02.jpg" alt="Product image 2" />
    <img itemprop="image" id="Image3" src="03.jpg" alt="Product image 3" />
    <img itemprop="image" id="Image4" src="04.jpg" alt="Product image 4" />
    <img itemprop="image" id="Image5" src="05.jpg" alt="Product image 5" />
    <img itemprop="image" id="Image6" src="06.jpg" alt="Product image 6" />
    <img itemprop="image" id="Image7" src="07.jpg" alt="Product image 7" />
    <img itemprop="image" id="Image8" src="08.jpg" alt="Product image 8" />
  </div>
  <div class="nextPageButton-wrap">
    <a id="nextPageButton" href="#" class="nextPageButton" role="button">&gt;</a>
  </div>
</div>

Add CSS for Layout #

We’ll set up the container to hide overflow, arrange images in a horizontal row, and position the navigation buttons:

.ImageContainer {
  position: relative;
  width: 80%; /* Adjust to your desired visible width */
  margin: 0 auto;
  overflow: hidden; /* Hide images outside the container bounds */
}

.SKUImages-wrapper {
  display: flex;
  gap: 15px; /* Space between images */
  width: max-content; /* Let the wrapper expand to fit all images */
}

.SKUImages-wrapper img {
  height: 200px; /* Set your preferred image height */
  width: auto;
  object-fit: cover;
}

/* Style navigation buttons */
.prevPageButton, .nextPageButton {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  padding: 10px 15px;
  text-decoration: none;
  z-index: 10;
  cursor: pointer;
}

.prevPageButton {
  left: 10px;
}

.nextPageButton {
  right: 10px;
}

.prevPageButton:hover, .nextPageButton:hover {
  background: rgba(0,0,0,0.7);
}

Vanilla JavaScript Scroll Logic #

Add this script to handle button clicks and smooth scrolling. We’ll use a fixed scroll distance (you can tweak this to scroll by one image width or the entire container width):

// Grab elements from the DOM
const prevBtn = document.getElementById('prevPageButton');
const nextBtn = document.getElementById('nextPageButton');
const imageWrapper = document.querySelector('.SKUImages-wrapper');
const scrollDistance = 300; // Adjust this to your preferred scroll amount

// Handle previous button click
prevBtn.addEventListener('click', (e) => {
  e.preventDefault(); // Stop the default link jump behavior
  // Scroll left, but don't go beyond the start
  const newScrollPosition = Math.max(imageWrapper.scrollLeft - scrollDistance, 0);
  imageWrapper.scrollTo({
    left: newScrollPosition,
    behavior: 'smooth' // Enable smooth scrolling animation
  });
});

// Handle next button click
nextBtn.addEventListener('click', (e) => {
  e.preventDefault();
  // Calculate the maximum scrollable position (total width minus visible width)
  const maxScrollPosition = imageWrapper.scrollWidth - imageWrapper.clientWidth;
  // Scroll right, but don't go beyond the end
  const newScrollPosition = Math.min(imageWrapper.scrollLeft + scrollDistance, maxScrollPosition);
  imageWrapper.scrollTo({
    left: newScrollPosition,
    behavior: 'smooth'
  });
});

Quick Customization Tips #

• Scroll by Image Width: Replace the fixed scrollDistance with this to scroll exactly one image plus gap:

  const firstImage = imageWrapper.querySelector('img');
  const scrollDistance = firstImage.offsetWidth + parseInt(getComputedStyle(imageWrapper).gap);
  

• Disable Buttons at Bounds: Add logic to gray out/disable the prev button when scrollLeft is 0, and the next button when scrollLeft hits maxScrollPosition
• Tweak Animation: Adjust the behavior: 'smooth' speed or add a CSS transition to the .SKUImages-wrapper for more control

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