为图片画廊的.img-btn-next和.img-btn-prev按钮添加.png图标

Hey there! Let's swap out those "next" and "last" text labels on your gallery buttons for PNG icons. Here's a straightforward fix that adjusts both your JavaScript and CSS:

Step 1: Update Your JavaScript to Use Image Elements #

Instead of creating text nodes for the buttons, we'll create <img> elements that point to your PNG icons. Make sure you replace next-icon.png and prev-icon.png with the actual file paths to your icons.

// Next Button
let newNextBtn = document.createElement("a");
// Replace text node with img element
let nextIcon = document.createElement("img");
nextIcon.src = "next-icon.png"; // Your next icon file path
nextIcon.alt = "Next image"; // Accessibility label for screen readers
newNextBtn.appendChild(nextIcon);
container.appendChild(newNextBtn);
newNextBtn.setAttribute("class", "img-btn-next");
newNextBtn.setAttribute("onclick", "changeImg(1)");
newNextBtn.style.cssText = "right:" + calcImgtoEdge + "px;";

// Previous Button
let newPrevBtn = document.createElement("a");
let prevIcon = document.createElement("img");
prevIcon.src = "prev-icon.png"; // Your previous icon file path
prevIcon.alt = "Previous image"; // Accessibility label for screen readers
newPrevBtn.appendChild(prevIcon);
container.appendChild(newPrevBtn);
newPrevBtn.setAttribute("class", "img-btn-prev");
newPrevBtn.setAttribute("onclick", "changeImg(0)");
newPrevBtn.style.cssText = "left:" + calcImgtoEdge + "px;";

Step 2: Adjust CSS to Fit the Icons #

Your current CSS includes text-specific styles (like font-family and text-transform) that we don't need anymore. We'll tweak the layout to center the icons, remove unnecessary text styles, and set a consistent button size:

.img-btn-next {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5vw;
  position: fixed;
  background-color: black;
  top: 50vh;
  z-index: 150;
  cursor: pointer;
  /* Optional: Set fixed size to match your icon dimensions */
  width: 40px;
  height: 40px;
}

.img-btn-next:hover {
  opacity: 0.8;
}

.img-btn-prev {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5vw;
  background-color: black;
  position: fixed;
  top: 50vh;
  z-index: 150;
  cursor: pointer;
  /* Match next button size for consistency */
  width: 40px;
  height: 40px;
}

.img-btn-prev:hover {
  opacity: 0.8;
}

/* Ensure icons scale properly inside buttons */
.img-btn-next img, .img-btn-prev img {
  width: 100%;
  height: auto;
  /* Optional: Turn icons white if your icons are dark (remove if not needed) */
  filter: brightness(0) invert(1);
}

Quick Tips: #

• Accessibility: Never skip the alt text—it helps screen reader users understand what each button does.
• Icon Sizing: Adjust the width and height values in the CSS to match your icon's dimensions. The img rule ensures icons scale without distortion.
• Icon Color: If your PNG icons aren't white, the filter property will invert their colors to fit the black button background. Remove this line if your icons are already the correct color.

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