Question

我正在研究非常简单的jQuery Slider。

JS BIN CODE

如果我有超过2个LI元素，滑动效果可以顺利进行。但是对于2个LI元素（当前代码），通过单击下一步它显示了加加速度效果，但是在点击上一个链接时，幻灯片效果非常有效。任何线索或解决方案将不胜感激。提前谢谢。

Answer 1

好的，编辑。

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

详细说明：

实际上非常简单。您的脚本有3个“活动”幻灯片。当前，下一个和前一个。

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

现在'补丁'做了什么。基本上，一旦你在没有补丁的情况下尝试你的代码并从滑块包中删除'margin-left：-500px'，你就会理解它，但无论如何我都会解释它。

让我们想象一下，你有一个只有2个值的基本数组而不是列表。您有2个选项：Next将索引增加1，将Previous减少1。您的初始幻灯片的索引为0，因此如果您增加索引，则转到索引1，如果减少它，则会得到索引-1，这会导致空幻灯片导致闪烁，这是您的脚本在删除时的工作方式<ul>元素的'margin-left'。

如果你添加'margin-left'，它会进入反转模式（下一个闪烁，但之前没有）。

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

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

补丁值执行以下操作：
0 - 无需补丁。
1 - 下次使用前需要修复下一个功能 2 - 上次功能需要在下次使用前修复
并且IF进行修复。

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

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

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

EDIT2：更优雅，更完整的解决方案！ Ver 2.0

将下一个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个滑块覆盖案例，请将开头更改为：

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

jQuery Slider无法正常工作

1 个答案: