轮播滑块后退功能异常：点击左箭头反而前进问题求助及代码审查

Let's break down what's causing the left arrow to trigger forward navigation and fix it step by step.

The Core Issues in Your Code #

1. Incorrect use of post-increment/decrement operators: Lines like active = active-- and active = active++ are the main culprits. The postfix operator (--/++) returns the original value of the variable before modifying it. When you assign that original value back to active, you're effectively canceling out the increment/decrement. For example:
   • If active is 2, active = active-- first returns 2, then sets active to 1, but immediately reassigns it back to 2. So active never actually decreases.
2. Wrong boundary checks: The condition if (active === -1) will never be true because active starts at 1 and is only ever incremented (or incorrectly "decremented") in your code. Similarly, if(active === slideList.length + 1) is an invalid check since active will never reach that value.
3. Combined UI update and state increment: Your changeSlide function both updates the UI and increments active, which causes conflicts when manually triggering navigation (you end up incrementing active twice in some cases).
4. Unnecessary code: img.removeAttribute('img') does nothing—there's no img attribute on the <img> element, so this line can be safely removed.

Fixed Code Implementation #

First, let's refactor your JavaScript to separate state management from UI updates, which makes the logic cleaner and easier to debug:

const slideList = [
    { img: "images/img1.jpg", text: 'First text' },
    { img: "images/img2.jpg", text: 'Second text' }, // Fixed typo: "tekst" → "text"
    { img: "images/img3.jpg", text: 'Third text' }    // Fixed typo: "tekst" → "text"
];
const img = document.querySelector('img.slider');
const h1 = document.querySelector('h1');
const dots = document.querySelectorAll('span');
const time = 30000;
let active = 1;

// Function to update the UI based on current active index
const updateSlide = () => {
    img.src = slideList[active].img;
    h1.textContent = slideList[active].text;
    // Update dots
    dots.forEach(el => el.classList.remove('active'));
    dots[active].classList.add('active');
};

// Function for automatic forward navigation
const nextSlide = () => {
    active++;
    // Wrap around to first slide if we reach the end
    if (active >= slideList.length) {
        active = 0;
    }
    updateSlide();
};

// Start automatic carousel
setInterval(nextSlide, time);

// Keyboard navigation handler
window.addEventListener('keydown', (e) => {
    if (e.keyCode === 39) {
        console.log(`Arrow right ----> e.keyCode = ${e.keyCode}`);
        nextSlide(); // Reuse the existing forward logic
    }
    if (e.keyCode === 37) {
        console.log(`Arrow left <---- e.keyCode: ${e.keyCode}`);
        active--;
        // Wrap around to last slide if we go below 0
        if (active < 0) {
            active = slideList.length - 1;
        }
        updateSlide(); // Update UI directly after adjusting active index
    }
});

Key Changes Explained: #

• Separated updateSlide and nextSlide: updateSlide only handles updating the DOM elements, while nextSlide manages the state (incrementing active and handling wrap-around). This avoids conflicts when manually triggering navigation.
• Fixed decrement logic: For the left arrow, we simply do active-- (no assignment needed) and then check if active is less than 0—if so, we set it to the last index of slideList (which is slideList.length - 1).
• Reused forward logic: The right arrow now calls nextSlide, which keeps our code DRY (Don't Repeat Yourself) and consistent with the automatic carousel behavior.
• Fixed typos: Corrected "tekst" to "text" in the slide list for consistency.

Additional Notes #

• If you want to prevent the automatic carousel from interfering with manual navigation (e.g., pause the carousel when the user presses an arrow key), you can clear the interval with clearInterval() and restart it after a delay.
• Consider using e.key instead of e.keyCode (which is deprecated) for better browser support. For example:

  if (e.key === 'ArrowRight') { ... }
  if (e.key === 'ArrowLeft') { ... }
  

内容的提问来源于stack exchange，提问作者Damian Moliński