带有无限循环的自定义jQuery滑块

Question

我已经为一个网站的即时消息编写了一个自定义滑块，该站点只是在努力解决如何使幻灯片循环的问题上挣扎，因此，当滑块加载时，如果单击向左，它将有意义的是最后一个元素？

$('.leftslide').click(function (e) {
    e.preventDefault();
    if ($('.landingPageBanner .active').is(':first-child')) return;
    $('.landingPageBanner .active').removeClass('active').prev().addClass('active');
    var newH1 = $('.landingPageBanner ul li.active').data('heading');
    var newP = $('.landingPageBanner ul li.active').data('paragraph');
    var newA = $('.landingPageBanner ul li.active').data('link');
    $('.mask h1').html(newH1);
    $('.mask p').html(newP);
    $('.mask .view-sector').attr('href', newA);
});

$('.rightslide').click(function (e) {
    e.preventDefault();
    if ($('.landingPageBanner .active').is(':last-child')) return;
    $('.landingPageBanner .active').removeClass('active').next().addClass('active');
    var newH1 = $('.landingPageBanner ul li.active').data('heading');
    var newP = $('.landingPageBanner ul li.active').data('paragraph');
    var newA = $('.landingPageBanner ul li.active').data('link');
    $('.mask h1').html(newH1);
    $('.mask p').html(newP);
    $('.mask .view-sector').attr('href', newA);

});

http://jsfiddle.net/3ss62/3/

Answer 1

如果您是幻灯片放映的第一个孩子，则想在单击“左”链接时回绕时激活最后一个孩子：

$('.leftslide').click(function (e) {
    e.preventDefault();
    if ($('.landingPageBanner .active').is(':first-child')) {
        $('.landingPageBanner .active').removeClass('active').siblings(':last-child').addClass('active');
    } else {
        $('.landingPageBanner .active').removeClass('active').prev().addClass('active');
    }

同样，单击“正确”链接时：

$('.rightslide').click(function (e) {
    e.preventDefault();
    if ($('.landingPageBanner .active').is(':last-child')) {
        $('.landingPageBanner .active').removeClass('active').siblings(':first-child').addClass('active');
    } else {
        $('.landingPageBanner .active').removeClass('active').next().addClass('active');
    }

http://jsfiddle.net/mblase75/75fQx/

Answer 2

实际上，这就是您所需要的：

jsBin演示

var $UL = $('.landingPageBanner ul'),   // Cache your selectors
    $LI = $('li', $UL),                 // 
    N   = $LI.length;                   // Count LI elements

$('.leftslide, .rightslide').click(function(e) {
  e.preventDefault();

  var R = $(this).hasClass('rightslide'),        // (Boolean) was Right clicked?
      I = $('.active', $UL).index(),             // Get idx of current LI
      D = $LI.removeClass('active').eq((R?++I:--I)%N).addClass('active').data();
      // (Above) Set active classes and get .data() Object from '.active' el.

  $('.mask h1').html(D.heading);        // think about Caching this selectors too
  $('.mask p').html(D.paragraph);
  $('.mask .view-sector').attr('href', D.link);

});

^{解释这一行：
$LI.removeClass('active').eq((R?++I:--I)%N).addClass('active').data();}

它的作用是针对.eq( I ) LI元素，它说：

R   ? // was the right button clicked?
++I : // TRUE : increment our index
--I   // FALSE: decrement our index
// and make sure to return a reminder (%N) from the total LI el. length
// The Reminder Operator % will return 'I' index to '0' if equals or exceeds 'N'

现在，已删除/分配了这些类，我们需要的是将当前活动 LI的.data()存储到var D 。

还要记住， .data()返回一个对象，因此使您的生活更轻松，并相应地使用它，即： D.heading