Javascript 一个函数未与jQuery无限旋转木马构建一起运行

因此，我尝试使用html、css和jQuery将自己打造成一个无限旋转木马，除了“后退”按钮外，所有功能都正常工作，不会循环，我已经花了相当长的时间来完成这项工作，我想知道是否有人对此有所了解？就是你可以看到代码的地方！我这么做只是因为我认为这会给我一个学习更多的机会，但是对代码布局或技术的任何批评都会很有帮助

特别是这个代码似乎不起作用

else if(loopPrev==true){
            sliderActive=true
            $('.item-holder').css({
                'left':clonePos
            });
            $('.item-holder').animate({
                'left':holderPos+$('.slider').width()+'px'
            },function(){
                sliderActive=false;
            });
        };

---

顺便说一句，这只是一个小片段，如果没有其他部分，就没有什么意义了

你来这里真是太酷了！你说你是初学者？我得说你对jQuery的了解相当不错！在我忘记之前，请回复您的评论：如果您在stackoverflow上发布了一些内容……它将被查看，很可能会被很多人看到：）。很少有人来到这里却没有得到任何帮助（尽管你可能并不总能得到答案）

幸运的是，我发现了你的问题！就在这里：

else if(loopPrev==true){
    sliderActive=true
    $('.item-holder').css({
        'left':clonePos
    });
    $('.item-holder').animate({
        'left':holderPos+$('.slider').width()+'px'
    },function(){
        sliderActive=false;
    });
};

检查是否循环，将滑块设置为活动，将下一张幻灯片设置为索引中的最后一张幻灯片（然后同时将其推到最后一张幻灯片），然后按正常方式设置动画。这会导致两个移动：首先移动到索引的后面，然后移动到holderPos+$（'.slider'）.width（）+'px'的值……这就是您奇怪的行为。这将有助于：

 else if(loopPrev==true){
     sliderActive=true;
     $('.item-holder').animate({
         'left':"-1800px"
     }, function(){ 
         sliderActive=false; 
     })
 };

值“-1800px”只是我预先计算的缓冲区中的最后一张幻灯片…您应该能够用clonePos变量替换它，而不会遇到麻烦

*编辑：还应将变量clonePos更改为如下所示：

var clonePos = '-'+($('.item').index()-1)*($('.slider').width());

当你在索引中的最后一张幻灯片和第一张幻灯片之间切换时，它将消除一个bug（如果你愿意，“平滑过渡”）

**

第二部分 **

为了实现无限滚动的幻觉，您需要在“左键按下”的动画调用中嵌入回调“push back”函数。现在已经很晚了，所以我还没有测试我将要编写的代码，但我很有信心它会适合您

else if(loopPrev==true){
 sliderActive=true;
 $('.item-holder').animate({
     'left':clonePos
 }, function(){
     $(this).css('left':holderPos+$('.slider').width()+'px');
     sliderActive=false; 
 })
};

如果你看一看，这与我最初给出的答案没有太大区别。我们所做的就是为animate使用回调函数，并添加了一个调用来将位置滑动到原始索引位置。同样，未经测试，但其想法是.animate（）将滑动到克隆，一旦完成，回调将用原始克隆交换克隆，然后停用滑块

你离得不远！下面是animate函数的语义规则（试图帮助您理解回调的工作方式）：

• params是我们的左键调用（在本例中为克隆幻灯片）
• 此处忽略持续时间
• 放松在这里被忽略了
• callback是我们的函数（）调用，它完成了我们的小david copperfield交换

---

希望这有帮助

jQuery编写短脚本很酷。 简而言之，您的滑块代码：

var width = $('.slider').width();
$('.item').css({width:width});
var $holder = $('.item-holder').css({left:-width}).prepend($('.item:last'));

$('.prev').click(function(){
    $holder.not(':animated').css({left:-2*width}).prepend($('.item:last')).animate({left:-width});
});
$('.next').click(function(){
    $holder.not(':animated').css({left:0}).append($('.item:first')).animate({left:-width});
});

​ 这就是完整的代码

---

如果你忍不住要查看，请在

上查看此操作，它对于初学者来说非常酷！非常感谢你！但问题是我试图使它无限大，所以我克隆了第一个项目并将其添加到列表的末尾，所以在实际的第一个项目上，我希望它“css”到最后一个项目（克隆的第一个项目“然后向左，到实际的最后一个项目”项目4）“，如果没有任何意义，我很抱歉，我觉得很难解释！但非常感谢您的响应！！您需要的是回调。更具体地说是回调动画。它基本上只是调用一个函数作为另一个函数最终参数的一部分（如果允许的话）。只有在初始函数完成后才会调用此回调函数。我将用一个示例Whaaat！编辑顶部答案？您是如何使其仅包含三个函数的？这是否意味着变量“$holder”实际上是一个对象？以及.not（“：animated”）是如何实现的工作？谢谢你，虽然这对我来说并不完全有意义，但我现在正忙着在这么短的时间内编写所有的代码！@peteri看不出这是一个合适的答案，但至少你学到了一些新东西！欢迎使用stackoverflow！$holder只是一个“真实”jQuery对象的变量..不是（“：动画”）当滑块当前移动时忽略任何操作。“.not（）”是一个负过滤器，“：animated”是一个用于动画元素的jQuery选择器。

var width = $('.slider').width();
$('.item').css({width:width});
var $holder = $('.item-holder').css({left:-width}).prepend($('.item:last'));

$('.prev').click(function(){
    $holder.not(':animated').css({left:-2*width}).prepend($('.item:last')).animate({left:-width});
});
$('.next').click(function(){
    $holder.not(':animated').css({left:0}).append($('.item:first')).animate({left:-width});
});