我正在构建一个 jQuery 驱动的推子，我想在一个页面上有多个实例。
目标：我正在尝试在没有插件帮助的情况下从头开始构建它。
我试过的：
1. 使用这个关键字/选择器来创建所需的变量，但没有得到我需要的。
2. 我还设置了一个带有争论的函数，以找出 jQuery 似乎不会以这种方式传递变量的困难方式。无论如何，大多数课程都是最好的学习方法。问题：我在本地进行了几次迭代，结果不同。我目前遇到了太多递归错误，尽管它确实以某种形式在本地工作。
想法：我的下一步将是对象表示法，但害怕用另一个错误的解决方案旋转我的轮子。
感谢大家
JSFiddle：http: //jsfiddle.net/UQmc3/
遵循
HTML的代码示例：
<div>
<div class="w-fader">
<ul class="w-slides">
<li class="current"><img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-1.png" /></li>
<li class="next"><img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-2.png" /></li>
<li><img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-3.png" /></li>
</ul>
</div>
<div class="w-fader">
<ul class="w-slides">
<li class="current"><img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-1.png" /></li>
<li class="next"><img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-2.png" /></li>
<li><img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-3.png" /></li>
<li><img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-1.png" /></li>
<li><img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-2.png" /></li>
<li><img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-3.png" /></li>
</ul>
</div>
</div>
jQuery/js：
var speed = 2000;
var name = 'fader';
var num = 1;
function setupUnique(){
$('.w-slides').each(function(){
var panelId = $(this).attr('id');
//alert(panelId);
var nextItem = $(this).find('li.next');
//alert(nextItem);
var currentItem = $(this).find('li.current');
var wrapHelperItem = $(this).find('.w-slides li.current+li');
var firstSwapItem = $(this).find('li:first');
var lastSwapItem = $(this).find('li:last');
fadePanels();
function fadePanels(){
$('#'+panelId).each(function(){
switcher();
function switcher(){
$(nextItem).animate({opacity:1}, speed, 'linear', function()
{
$(nextItem).removeClass('current');
$(this).addClass('current');
$(nextItem).addClass('next');
$(this).removeClass('next');
$(nextItem).css('opacity',0);
});
checker();
}
//checker();
function checker(){
if($(lastSwapItem).hasClass('current'))
{
$(firstSwapItem).addClass('next');
$(firstSwapItem).addClass('next').css('opacity',0);
}
else if($(firstSwapItem).hasClass('next') && $(lastSwapItem).hasClass('current'))
{
$(firstSwapItem).addClass('current');
$(wrapHelperItem).addClass('next');
$(firstSwapItem).removeClass('next');
}
}
setupUnique();
});
}
});
}
function makeUnique(){
$('.w-slides').each(function(){
$(this).attr('id',name+num);
num++;
setupUnique();
});
}
makeUnique();