Question

我的旋转木马已经建成，每5秒钟自动滑动到下一帧，我已经写过了：

var carousel = $('.carousel ul:first');
var pagination = $('.carousel ul:last');

function slide01() {
  carousel.delay(5000).animate({'margin-left':'-100%'}, function() {
    pagination.find('li').removeClass('on');
    pagination.find(':nth-child(2)').addClass('on');
  });
  slide02();
};

function slide02() {
  carousel.delay(5000).animate({'margin-left':'-200%'}, function() {
    pagination.find('li').removeClass('on');
    pagination.find(':nth-child(3)').addClass('on');
  });
  slide03();
};

function slide03() {
  carousel.delay(5000).animate({'margin-left':'-300%'}, function() {
    pagination.find('li').removeClass('on');
    pagination.find(':nth-child(4)').addClass('on');
  });
  slide04();
};

function slide04() {
  carousel.delay(5000).animate({'margin-left':'0%'}, function() {
    pagination.find('li').removeClass('on');
    pagination.find(':nth-child(1)').addClass('on');
  });
  slide01();
};

slide01();

虽然这是有效的，但我在分页按钮方面遇到了困难。他们会回复，但不会转到相应的页面，而是转到下一页，您可以在我的 FIDDLE 中查看。

这是我为每个按钮编写的代码：

pagination.find('li:nth-child(1)').click(function(){
  carousel.stop().animate({'margin-left':'0%'});
});

pagination.find('li:nth-child(2)').click(function(){
  carousel.stop().animate({'margin-left':'100%'});
});

pagination.find('li:nth-child(3)').click(function(){
  carousel.stop().animate({'margin-left':'200%'});
});

pagination.find('li:nth-child(4)').click(function(){
  carousel.stop().animate({'margin-left':'300%'});
});

我该怎么做才能解决这个问题？

Answer 1

我已更新您的Javascript代码，以提供您所需的功能，并使其更具扩展性。如果您有任何问题，请与我们联系。

var carousel = $('.carousel ul:first');
var pagination = $('.carousel ul:last');
var slideWidth = 200;
var autoSlideTiming = 5000;
var timeout = null;

// Buttons
$.each(pagination.children(), function(i){
    $(this).click(function(){
        pagination.find('li.on').removeClass('on');
        //if you wanted to find the width dynamically
        //var slideWidth = $(this).parent().parent().find('ul:eq(0) li:eq('+i+')').width();
        carousel.stop().animate({'margin-left': -(i * slideWidth)});
        $(this).addClass('on');
    });
});

// Slider
function advanceSlide(){
   var currIndex = $(".pagination li.on").index();
   var nextIndex = ((pagination.children().length - 1) == currIndex) ? 0 : (currIndex + 1); 
   carousel.animate({'margin-left': -(nextIndex * slideWidth)}, function() {
        pagination.find('li.on').removeClass('on');
        pagination.find(':nth-child('+(nextIndex + 1)+')').addClass('on');
       timeout = setTimeout(function(){advanceSlide()}, autoSlideTiming);
    });   
}

$('.carousel').hover(function(){
    clearTimeout(timeout);    
}, function(){
    timeout = setTimeout(function(){advanceSlide()}, autoSlideTiming);
});
//init auto slide
timeout = setTimeout(function(){advanceSlide()}, autoSlideTiming);

此处还有更新的Fiddle

<强>解释

$.each是一个jQuery实用程序函数，其作用类似于普通的for循环（如果您知道如何，我实际上会推荐一个vanilla JavaScript for循环）。这个$.each接受2个参数：一个集合（在我们的例子中是pagination.children()，它是一个li的数组）和一个回调函数。这个回调函数传入i，这是我们从零开始的集合索引。所以，它不是1,2,3,4而是0,1,2,3。在这个循环中this是li，它附加了一个处理删除和应用{的点击事件{1}}类以及动画。 on采用当前从零开始的索引，并将其乘以-(i * slideWidth)，然后得到该结果的负值。因此，第一张幻灯片slideWidth会将边距设置为-0或0，第二张幻灯片-(0 * 200)会将边距设置为-200左右，这样可以向左移动200像素让它滑动。这将允许您为您的分页添加新的-(1 * 200)，此代码仍然可以使用！

使li函数动态化的技巧是找到下一张幻灯片的索引。为了找到我们需要去的地方，我们首先必须找到我们所处的位置。这就是advanceSlide()的用途，我们在jQuery currIndex函数中找到它，它返回带index()类的li的从零开始的索引。现在神奇了。正在使用ternary operator设置on变量来查找值。三元数只是基本nextIndex然后if语句的程序员简写。因此，如果此代码中的三元组以正常方式写出，它将如下所示：

else

记住我们的var nextIndex; if( (pagination.children().length - 1) == currIndex ){ nextIndex = 0; }else{ nextIndex = currIndex + 1; }是从零开始的，但是我们的集合（pagination.children（））currIndex（总集合中的项目数）不是从零开始的，所以我们必须减去1它。然后我们检查该值是否等于我们的length，因为如果这是我们集合中的最后一项，我们需要将currIndex设置回0，以便幻灯片循环回来。如果它不是最后一个索引，我们只需添加1即可进入下一张幻灯片。在我们找到nextIndex之后，我们会动画并应用我们的课程。

我知道这有点长，但你完全理解你实施的代码是很重要的！如果您还有其他问题，请告诉我们！

Answer 2

你超过了＃34;最大调用堆栈大小。＆＃34;错误。您的slide0X函数会调用另一个slide0Y函数，依此类推。只有在slide0Y动画结束后（在完整回调中），才应调用slide0X。

此外，在您的click回调中，margin-left应该是否定的，因为您想要向左滑动。

BTW，我会实现一个函数slideTo(slideId)，这样它就可以用于n个幻灯片，而不是为每张幻灯片编写一个函数。

滑动转盘 - 分页不会重定向到正确的位置

2 个答案: