基于CSS Flex Order的轮播图上一页功能修复：点击显示下一页问题

我正在学习用CSS Flex Order实现无限轮播的教程，已经完成了基础的下一页切换功能，但在实现反向切换（上一页）时遇到问题：点击上一页按钮后，滑动显示的却是下一页内容。我尝试复制原FlexSliderNext函数并修改为FlexSliderPrev来实现反向逻辑，但显然哪里出错了。

以下是我目前的JavaScript代码：

const FlexSliderNext = {
    // total no of items
    num_items: document.querySelectorAll(".slide_image").length,
    
    // position of current item in view
    current: 1,

    init: function() {
        // set CSS order of each item initially
        document.querySelectorAll(".slide_image").forEach(function(element, index) {
            element.style.order = index+1;
        });

        this.addEvents();
    },

    addEvents: function() {
        var that = this;
        
        // click on move item button
        document.querySelector("#move-button-next").addEventListener('click', () => {
            this.gotoNext();
        });

        // after each item slides in, slider container fires transitionend event
        document.querySelector("#slide").addEventListener('transitionend', () => {
            this.changeOrderNext();
        });
    },

    changeOrderNext: function() {
        // change current position
        if(this.current == this.num_items)
            this.current = 1;
        else 
            this.current++;

        let order = 1;

        // change order from current position till last
        for(let i=this.current; i<=this.num_items; i++) {
            document.querySelector(".slide_image[data-position='" + i + "']").style.order = order;
            order++;
        }

        // change order from first position till current
        for(let i=1; i<this.current; i++) {
            document.querySelector(".slide_image[data-position='" + i + "']").style.order = order;
            order++;
        }

        // translate back to 0 from -100%
        // we don't need transitionend to fire for this translation, so remove transition CSS
        document.querySelector("#slide").classList.remove('slider-container-transition');
        document.querySelector("#slide").style.transform = 'translateX(0)';
    },

    gotoNext: function() {
        // translate from 0 to -100% 
        // we need transitionend to fire for this translation, so add transition CSS
        document.querySelector("#slide").classList.add('slider-container-transition');
        document.querySelector("#slide").style.transform = 'translateX(-100%)';
    }
};


const FlexSliderPrev = {
    // total no of items
    num_items: document.querySelectorAll(".slide_image").length,
    
    // position of current item in view
    current: -1,

    init: function() {
        // set CSS order of each item initially
        document.querySelectorAll(".slide_image").forEach(function(element, index) {
            element.style.order = index-1;
        });

        this.addEvents();
    },

    addEvents: function() {
        var that = this;
        
        // click on move item button
        document.querySelector("#move-button-prev").addEventListener('click', () => {
            this.gotoPrev();
        });

        // after each item slides in, slider container fires transitionend event
        document.querySelector("#slide").addEventListener('transitionend', () => {
            this.changeOrderPrev();
        });
    },

    changeOrderPrev: function() {
        // change current position
        if(this.current == this.num_items)
            this.current = 2;
        else 
            this.current--;

        let order = 2;

        // change order from current position till last
        for(let i=this.current; i>=this.num_items; i--) {
            document.querySelector(".slide_image[data-position='" + i + "']").style.order = order;
            order--;
        }

        // change order from first position till current
        for(let i=2; i>this.current; i--) {
            document.querySelector(".slide_image[data-position='" + i + "']").style.order = order;
            order--;
        }

        // translate back to 0 from 100%
        // we don't need transitionend to fire for this translation, so remove transition CSS
        document.querySelector("#slide").classList.remove('slider-container-transition');
        document.querySelector("#slide").style.transform = 'translateX(0)';
    },

    gotoPrev: function() {
        // translate from 0 to -100% 
        // we need transitionend to fire for this translation, so add transition CSS
        document.querySelector("#slide").classList.add('slider-container-transition');
        document.querySelector("#slide").style.transform = 'translateX(100%)';
    }
};

FlexSliderPrev.init();
FlexSliderNext.init();

问题根源 #

1. 状态冲突：两个独立对象维护各自的current状态，初始化时互相覆盖元素的order样式，导致轮播状态混乱。
2. 反向逻辑完全错误：FlexSliderPrev的初始化、current更新、order赋值逻辑都不符合Flex轮播原理，循环条件和变量变化方向完全颠倒。

修复方案 #

将两个对象合并为单个FlexSlider，统一维护状态和逻辑，确保反向切换的逻辑与正向对称：

const FlexSlider = {
    // total no of items
    num_items: document.querySelectorAll(".slide_image").length,
    
    // position of current item in view
    current: 1,
    // 标记当前切换方向，避免transitionend事件混淆
    direction: null,

    init: function() {
        // 统一初始化所有slide的order
        document.querySelectorAll(".slide_image").forEach(function(element, index) {
            element.style.order = index + 1;
        });

        this.addEvents();
    },

    addEvents: function() {
        // 下一页按钮事件
        document.querySelector("#move-button-next").addEventListener('click', () => {
            this.gotoNext();
        });

        // 上一页按钮事件
        document.querySelector("#move-button-prev").addEventListener('click', () => {
            this.gotoPrev();
        });

        // 容器过渡结束事件
        document.querySelector("#slide").addEventListener('transitionend', () => {
            if (this.direction === 'next') {
                this.changeOrderNext();
            } else if (this.direction === 'prev') {
                this.changeOrderPrev();
            }
        });
    },

    // 正向切换的order调整
    changeOrderNext: function() {
        this.current = this.current === this.num_items ? 1 : this.current + 1;

        let order = 1;
        // 从当前项开始到最后，依次设置order为1、2...
        for(let i = this.current; i <= this.num_items; i++) {
            document.querySelector(`.slide_image[data-position='${i}']`).style.order = order;
            order++;
        }
        // 从第一项到当前项之前，设置后续order
        for(let i = 1; i < this.current; i++) {
            document.querySelector(`.slide_image[data-position='${i}']`).style.order = order;
            order++;
        }

        // 重置位置，关闭过渡
        document.querySelector("#slide").classList.remove('slider-container-transition');
        document.querySelector("#slide").style.transform = 'translateX(0)';
        this.direction = null;
    },

    gotoNext: function() {
        this.direction = 'next';
        document.querySelector("#slide").classList.add('slider-container-transition');
        document.querySelector("#slide").style.transform = 'translateX(-100%)';
    },

    // 反向切换的order调整
    changeOrderPrev: function() {
        this.current = this.current === 1 ? this.num_items : this.current - 1;

        let order = 1;
        // 从当前项开始到第一项，依次设置order为1、2...
        for(let i = this.current; i >= 1; i--) {
            document.querySelector(`.slide_image[data-position='${i}']`).style.order = order;
            order++;
        }
        // 从最后一项到当前项之后，设置后续order
        for(let i = this.num_items; i > this.current; i--) {
            document.querySelector(`.slide_image[data-position='${i}']`).style.order = order;
            order++;
        }

        // 重置位置，关闭过渡
        document.querySelector("#slide").classList.remove('slider-container-transition');
        document.querySelector("#slide").style.transform = 'translateX(0)';
        this.direction = null;
    },

    gotoPrev: function() {
        this.direction = 'prev';
        document.querySelector("#slide").classList.add('slider-container-transition');
        document.querySelector("#slide").style.transform = 'translateX(100%)';
    }
};

// 只初始化一次
FlexSlider.init();

关键修改说明 #

1. 合并对象：用单个FlexSlider统一管理current状态和所有切换逻辑，避免状态冲突。
2. 方向标记：新增direction属性，确保transitionend事件只执行对应方向的order调整逻辑。
3. 反向逻辑对称：
   • gotoPrev让容器向translateX(100%)滑动，与正向的-100%对称。
   • changeOrderPrev中，current更新为上一项（边界处理：当前是第1项时跳转到最后一项）。
   • 循环调整order时，从当前项向前遍历到第一项，再从最后一项遍历到当前项之后，确保上一项成为新的显示项。
4. 统一初始化：只执行一次初始化，避免样式覆盖。

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