jQuery滑动条没有正常工作

Question

jQuery滑动条没有正常工作

javascriptjquery

3

我在制作一个非常简单的jQuery幻灯片。

JS BIN代码

如果我有超过2个LI元素，幻灯片效果可以平稳地运行。但是对于2个LI元素（当前代码），点击“下一个”会出现抖动效果，然而点击“上一个”链接后幻灯片效果可以完美运行。任何线索或解决方案都将不胜感激。提前致谢。

- user2695680

请将您的代码放在问题中。 - j08691

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hristo Valkanov · Accepted Answer

好的，已经编辑过了。

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

详细解释：

实际上非常简单。你的脚本有三个“活动”幻灯片：当前、下一个和前一个。

如果你只有两个幻灯片，那么你就没有下一个幻灯片（根据你使用的排序方法），所以你不是切换到下一张幻灯片，而是切换到一个空白空间，然后将第二张幻灯片放置在它的位置上（第二张幻灯片在动画结束后出现，因此会“闪烁”）。

现在，“补丁”的作用是什么。基本上，你可以尝试在没有补丁的情况下运行代码，并从滑块包装中删除“margin-left: -500px”，然后你就会明白它的作用，但无论如何，我都会解释一下。

假设您有一个仅包含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');
    }

当您单击“下一个”或“上一个”时，结束并擦除它。

编辑2：更加优雅和完整的解决方案！版本2.0

编辑下一个和上一个函数：

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

编辑：如果只有一个滑块，请将开头更改为：

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示例