1

所以我尝试使用 html、css 和 jQuery 让自己成为一个无限轮播，除了后退按钮之外的所有工作都不会循环，我现在已经花了很长时间这样做，我想知道是否有人有任何见解？http://jsfiddle.net/e2SKk/是你可以看到代码的地方！我之所以这样做，是因为我认为这会给我一个学习更多知识的机会，但是对代码布局或技术的任何批评都会有所帮助！

特别是它的这段代码似乎不起作用

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

顺便说一句，这只是一个片段，没有其余部分就没有多大意义！

4

2 回答 2

1

很酷的小滑块，你要去这里！你说你是初学者？我想说你已经很好地掌握了 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());

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

**

第二部分

**

为了实现无限滚动的错觉，您需要在“左按下”动画调用中嵌入回调“后推”函数。这里已经很晚了，所以我还没有测试我要编写的代码，但我相当有信心它会为你工作。

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

如果您看一下，这与我提供的原始答案没有太大区别。我们所做的只是获取 animate 的回调函数，并添加一个调用以将位置滑动到原始索引位置。同样，未经测试，但想法是 .animate() 将滑动到克隆，一旦完成，您的回调会将克隆与原始交换，然后停用滑块。

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

animate( params, [duration], [easing], [callback] )
  • params 是我们的左调用（在这种情况下是克隆的幻灯片）
  • 此处忽略持续时间
  • 此处忽略缓动
  • 回调是我们的 function() 调用，它执行我们的小大卫科波菲尔交换

希望这可以帮助！

于 2012-10-08T00:39:15.417 回答
1

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});
});

​ 这是完整的代码。

在http://jsfiddle.net/creativecouple/YPU2d/上查看此操作

于 2012-10-08T14:25:38.523 回答