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

我已经为一个网站编写了一个自定义滑块，我只是在努力解决如何制作幻灯片循环的问题，所以当滑块加载时，如果你点击左边它将是最后一个元素，如果这有意义吗？

$('.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()返回一个Object，这样可以让你的生活更轻松，并相应地使用，即： D.heading