0

我有一个我喜欢认为是编写的完美滑块——它动态地计算元素的数量、它们的宽度，并相应地调整自身。它可以通用，只需要基于顶级包装器 ID 的最少样式，并且适用于不同页面上的不同后退/下一个按钮和不同大小的滑动元素。但是当我试图在同一页面上做两个滑块时，我遇到了问题。我知道这与使我的变量本地化有关，我可能需要运行一个“每个”来覆盖一个页面上的两个滑块，但我对如何实现所有这些感到困惑。我认为我如何将其分解为 3 个功能使这变得更加困难。

我的 JS 粘贴在下面。如果您想通过 CSS 和 HTML 看到它在行动或不行动，请参阅http://www.anomie.info/test/test.html。[如果您想了解它应该如何工作，并且只使用页面上的一个滑块，请参阅http://www.anomie.info/test/test.zip并压缩所有内容。请注意在 zip 中的“确定”版本中，当有或没有更多滑块元素可供单击时，后退和前进按钮如何适当地打开和关闭。]

非常感谢任何和所有的指针！

// slider
if ($('.slider-inner-wrapper').length) {
    $(window).load(function(){
        slideImageVals = function() {
            wrapperSliderWrapperWidth = $('.slider-inner-wrapper').width();
            wrapperSliderInnerWidth = $('.slider-inner-inner .element-slide').width();
            wrapperSliderInnerLength = $('.slider-inner-inner .element-slide').length;
            wrapperSliderInnerMakeWidth = wrapperSliderWrapperWidth * wrapperSliderInnerLength;
            $('.slider-inner-inner').width(wrapperSliderInnerMakeWidth);
            wrapperSliderInnerSubWidth = wrapperSliderInnerWidth - wrapperSliderInnerMakeWidth;
        }
        slideImageVals();

        slideImageChangeVals = function() {
            wrapperSliderInnerPositionLeft = Math.round($('.slider-inner-inner').position().left);
            wrapperSliderInnerSlideRight = (wrapperSliderInnerPositionLeft + wrapperSliderInnerWidth);
            wrapperSliderInnerSlideLeft = (wrapperSliderInnerPositionLeft - wrapperSliderInnerWidth);

            if ($('.slider-inner-inner .element-slide').length <= 1) {
                $('.slider-button').hide(); 
            }
            if (wrapperSliderInnerPositionLeft < 0) {
                $('.slider-button-back').addClass('active');
            }
            if (wrapperSliderInnerPositionLeft == 0) {
                $('.slider-button-back').removeClass('active');
            }
            if (wrapperSliderInnerMakeWidth > wrapperSliderInnerWidth) {
                $('.slider-button-next').addClass('active');
            }
            if (wrapperSliderInnerPositionLeft <= wrapperSliderInnerSubWidth) {
                $('.slider-button-next').removeClass('active');
            }
        }
        slideImageChangeVals();

        slideImageHoldFlag = function() {
            slideImageChangeVals();
            wrapperSliderInnerFlagLeft = (wrapperSliderInnerPositionLeft / wrapperSliderInnerWidth);
        }
        slideImageHoldFlag();
    });

    $('.slider-button-next').click(function() {
        if ($(this).hasClass('active')) {
            $('.slider-inner-inner').animate({ 'left': wrapperSliderInnerSlideLeft }, {
                        duration: 1000,
                        specialEasing: {
                        left: "easeOutBack"
                    },
                        complete: function() {
                            slideImageHoldFlag();
                    }
                });
        }
    });
    $('.slider-button-back').click(function() {
        if ($(this).hasClass('active')) {
            $('.slider-inner-inner').animate({ 'left': wrapperSliderInnerSlideRight }, {
                        duration: 1000,
                        specialEasing: {
                        left: "easeOutBack"
                    },
                        complete: function() {
                            slideImageHoldFlag();
                    }
                });
        }
    });
}
// end slider

出于某种原因，我无法让它在 jsfiddle 上运行。对于那些喜欢 jsfiddle 的人，我深表歉意。

4

0 回答 0