这是与我上一个问题（现已解决）相同的页面，但主机已关闭，因此我无法展示一个实时示例。我正在使用 Fearless Flyer 的内容滑块，因为它具有我发现的最简单的标记和代码。在这里看到它：http: //demo.fearlessflyer.com/html/demo/content-slider/
但是，很明显它是为每页一个滑块而不是多个滑块制作的。如果我尝试用两个滑块不变地实现它，第二个滑块不起作用，因为滑动的负边距值乘以第一个滑块已经发生的计算 - 所以边距缩小 -右侧 4000 像素，没有要显示的照片。
我已经让它与两个滑块一起工作，使用以下标记：
我有两个滑块，一个叫做“lightbox_gallery”，一个叫做“lightbox_5gruende”。
<div id="lightbox_gallery" class="lightbox_window">
<div id="mother_gallery">
<ul>
<li><img id="test" src="gallery_02.jpg" /><a class="next" href="#">next</a></li>
<li><img src="gallery_01.jpg" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
<li><img src="gallery_02.jpg" /><a class="previous" href="#">prev</a><a class="startover" href="#">startover</a></li>
</ul>
</div>
</div> <!--end lightbox div -->
<div id="lightbox_5gruende" class="lightbox_window">
<div id="mother_5gruende">
<ul>
<li><img id="test" src="gallery_03.jpg" /><a class="next" href="#">next</a></li>
<li><img src="gallery_03.jpg" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
<li><img src="gallery_02.jpg" /><a class="previous" href="#">prev</a><a class="startover" href="#">startover</a></li>
</ul>
</div>
</div> <!--end lightbox div -->
然后是这个令人难以置信的 hacky 脚本：
$(window).load(function() {
var theImage = $('#lightbox_gallery ul li img');
var theImage2 = $('#lightbox_5gruende ul li img');
var theWidth = 790;
$('#mother_gallery').css({
//stuff
});
//get total of image sizes and set as width for ul
var totalWidth = theImage.length * theWidth;
$('ul').css({
width: function(){
return totalWidth;
}
});
$('#mother_5gruende').css({
//stuff
});
//get total of image sizes and set as width for ul
var totalWidth = theImage.length * theWidth;
$('ul').css({
width: function(){
return totalWidth;
}
});
$(theImage).each(
function(intIndex){
$(this).nextAll('a')
.bind("click", function(){
if($(this).is(".next")) {
$(this).parent('li').parent('ul').animate({
"margin-left": (-(intIndex + 1) * 790)
}, 1000)
} else if($(this).is(".previous")){
$(this).parent('li').parent('ul').animate({
"margin-left": (-(intIndex - 1) * 790)
}, 1000)
} else if($(this).is(".startover")){
$(this).parent('li').parent('ul').animate({
"margin-left": (0)
}, 1000)
}
});//close .bind()
});//close .each()
// THEN REPEATING THE SAME WITH SLIGHTLY DIFFERENT NAMES BECAUSE I DO NOT KNOW HOW TO WRITE A REUSABLE FUNCTION //
$(theImage2).each(
function(intIndex2){
$(this).nextAll('a')
.bind("click", function(){
if($(this).is(".next")) {
$(this).parent('li').parent('ul').animate({
"margin-left": (-(intIndex2 + 1) * 790)
}, 1000)
} else if($(this).is(".previous")){
$(this).parent('li').parent('ul').animate({
"margin-left": (-(intIndex2 - 1) * 790)
}, 1000)
} else if($(this).is(".startover")){
$(this).parent('li').parent('ul').animate({
"margin-left": (0)
}, 1000)
}
});//close .bind()
});//close .each()
});//doc ready
这太丑了，让人心疼！它可以工作，但我不想让两个完全独立的滑块功能对不同滑块中的图像做同样的事情。
我怎样才能重写它，以便 $(theImage).each 内部的计算可以用于两个滑块？