我设法将这个出色的示例应用于我的需求：
有一点小改动：两个画廊都将图像应用到同一个幻灯片容器，所以不是让“#thumbs0”缩略图更改“#slideshow0”中的图像，而“#thumbs1”缩略图更改“#slideshow1”中的图像，我让它们都设置为更改 "#slideshow" 中的图像。
这是因为我使用标签来分隔 2 种不同类别的缩略图，它们会在一个幻灯片容器中更改图像。
我通过将 imageContainerSel 设置为“#slideshow”而不是示例中的“#slideshow”+i 来做到这一点。
这是代码：
HTML：
<div id="tabs">
<div class="each-gallery">
<div id="thumbs0" class="navigation">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
</ul>
<div id="tabs-1">
<ul class="thumbs noscript">
<li>
<a class="thumb" href="images/1.jpg" title="Title #0">
<img src="images/thumbs/1.jpg" alt="Title #0" />
Title 1
</a>
<div class="caption">
<div class="image-title">Title 1</div>
<div class="image-desc">Description 1</div>
</div>
</li>
<li>
<a class="thumb" href="images/2.jpg" title="Title #0">
<img src="images/thumbs/2.jpg" alt="Title #0" />
Title 2
</a>
<div class="caption">
<div class="image-title">Title 2</div>
<div class="image-desc">Description 2</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div id="tabs-2">
<div class="each-gallery">
<div id="thumbs1" class="navigation">
<ul class="thumbs noscript">
<li>
<a class="thumb" href="images/3.jpg" title="Title #0">
<img src="images/thumbs/3.jpg" alt="Title #0" />
Title 3
</a>
<div class="caption">
<div class="image-title">Title 3</div>
<div class="image-desc">Description 3</div>
</div>
</li>
<li>
<a class="thumb" href="images/4.jpg" title="Title #0">
<img src="images/thumbs/4.jpg" alt="Title #0" />
Title 4
</a>
<div class="caption">
<div class="image-title">Title 4</div>
<div class="image-desc">Description 4</div>
</div>
</li>
</ul>
</div>
</div>
</div>
Javascript：
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '960px', 'float' : 'left'});
$('div.content').css('display', 'block');
$(".each-gallery").each(function(i){
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs + i + ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs'+i).galleriffic({
delay: 2500,
numThumbs: 20,
preloadAhead: 0,
enableTopPager: false,
enableBottomPager: false,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
}
});
});
});
</script>
问题：
在页面加载时，两个画廊同时将它们的第一张图片加载到#slideshow，因此在初始页面加载时，图片出现两次，一个在另一个下方。只有在单击不同的缩略图后，第二个图像才会消失，并且一切都按预期工作。
我如何解决它？