javascript - jQuery slider 无法正常工作

Question

我正在开发非常简单的 jQuery Slider。

JS BIN CODE

如果我有超过 2 个 LI 元素，幻灯片效果会很流畅。但是对于 2 个 LI 元素(当前代码)，通过单击下一个它会显示 SCSS 效果，但是在单击上一个链接时幻灯片效果完美。任何线索或解决方案将不胜感激。提前致谢。

Answer 1

好的，已编辑。

正如我在评论中指出的那样，问题是当您单击下一步时，没有要切换到的第一个元素，因此它切换到一个空白元素，然后附加第一个元素。

详细解释:

其实很简单。您的脚本有 3 张“事件”幻灯片。当前、下一个和上一个。

如果你只有 2 张幻灯片，那么你没有下一张幻灯片(由于你使用的排序方法)，所以你没有切换到下一张幻灯片，而是切换到一个空白区域，然后将第二张幻灯片放在它的位置上(第二张幻灯片在动画结束后出现，因此它“闪烁”)。

现在“补丁”做了什么。基本上，一旦您在没有补丁的情况下尝试您的代码并从 slider 换行中删除“margin-left: -500px”，您就会理解它，但无论如何我都会解释它。

让我们假设您有一个只有 2 个值的基本数组，而不是列表。您有 2 个选项:Next 将索引增加 1，而 Previous 将索引减少 1。您的初始幻灯片的索引为 0，因此如果您增加索引，您将转到索引 1，如果您减少它，您将获得索引 -1，这会导致一张空白幻灯片导致闪烁，如果您删除来自 <ul> 的 'margin-left'元素。

如果你添加 'margin-left' 它会进入反转模式(下一个闪烁，但前一个不闪烁)。

补丁的作用是检测异常是否有效，并打开/关闭 margin-left值(value)。

不幸的是，当您这样做时，幻灯片也会切换顺序，因此需要额外的附加内容才能使事情井井有条。如果您删除 IF 中的额外附加内容，您会注意到此事件。

补丁值执行以下操作:
0 - 无需打补丁。
1 - 下一个功能需要在下次使用前修复。
2 - prev 函数需要在下次使用前修复。

IF 负责修复。

可以通过在开头添加一个虚拟元素来修复它，方法是放置以下代码:

if($('.slider ul').length<3){
          $('.slider ul li:first-child').clone().appendTo('.slider ul');
    }

点击下一个或上一个时结束然后删除它。

EDIT2:一个更加优雅和完整的解决方案!版本 2.0

将 next AND prev 函数编辑为:

var patched = 0;
if($('.slider ul li').length==2){
  patched = 1;
}

var sliderWrap = $('.slider ul'),
            slideElem = $('.slider ul li'),
            slideCount = slideElem.length,
            slideWidth = $('.slider ul li').width(),
            slideHeight = $('.slider ul li').height(),
            sliderUlWidth = slideCount * slideWidth;

        $('.slider').css({ width: slideWidth, height: slideHeight });
        $('.slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
        $('.slider ul li:last-child').prependTo('.slider ul');

        var previous = function() {
            if(patched==2){
              sliderWrap.css('margin-left','-500px');
              $('.slider ul li:last-child').prependTo('.slider ul');
              patched=1;
            }
            sliderWrap.animate({
                left: + slideWidth
            }, 200, function () {
                $('.slider ul li:last-child').prependTo('.slider ul');
                sliderWrap.css('left', '');
            });
        };

        var next = function() {

            if(patched==1){
              sliderWrap.css('margin-left','0px');
              $('.slider ul li:first-child').appendTo('.slider ul');
              patched=2;
            }
            sliderWrap.animate({
                left: - slideWidth
            }, 200, function () {
                $('.slider ul li:first-child').appendTo('.slider ul');
                sliderWrap.css('left', '');
            });
        };

试试新的:http://jsbin.com/pexigesu/32/edit

编辑:要仅用 1 个 slider 覆盖外壳，请将开头更改为:

if($('.slider ul li').length==2){
  patched = 1;
}else if($('.slider ul li').length==1){
  $('.slider ul li:last-child').clone().prependTo('.slider ul');
  $('.slider ul li:last-child').clone().prependTo('.slider ul');
}

它只是将第一个元素克隆两次，因为它几乎是同一个元素，所以不需要控制。 JSbin example