我有一个带有寻呼机的 jQuery Cycle,它创建了一个无序列表,点击后会更改幻灯片。我正在尝试使用无序列表来显示/隐藏每张幻灯片的关联文本。并且,为了使该过程进一步复杂化,当没有与幻灯片关联的文本时,有一组默认文本。
html 看起来像这样:
<div class="slideshow">
<img src="img1.png" />
<img src="img2.png" />
<img src="img3.png" />
</div>
<div class="slidetxt slide-3-text" style="display:none;">Text to appear with slide 3</div>
<div class="slidetxt slide-1-text">Text to appear with slide 1</div>
<div class="slidetxt defaultcontent" style="display:none;">This is the default text for the page.</div>
jQuery 看起来像这样:
jQuery(document).ready(function() {
jQuery('.slideshow')
.after('<ul id="slidenav" />')
.cycle({
fx: 'fade',
timeout: 0,
pager: '#slidenav',
pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#"></a></li>';
}
});
jQuery('#slidenav li a').click(function(){
var index = jQuery(this).parent('li').index();
index = index + 1;
var slidetxt = ".slide-"+index+"-text";
jQuery(".slidetxt").hide("slow", function(){
if(jQuery(slidetxt).length){
jQuery(slidetxt).show("slow");
}else{
jQuery(".defaultcontent").show("slow");
}
});
});
});
出于某种原因,单击第三个导航按钮总是可以正常工作,但单击第二个总是显示默认文本,然后立即隐藏它,然后再次显示它,单击第一个导航按钮有时可以正常工作,有时会显示/隐藏/表演舞蹈。
我猜这与 jQuery 有关,认为它在真正完成之前已经完成了操作,但也许这只是我的草率代码!:-) 所有帮助将不胜感激!谢谢。