Jquery循环 - 如何在不破坏缩略图寻呼机的情况下将我的图像包装在span标签中？

Question

http://jsfiddle.net/2gktS/21/

基本上那里的jfiddle显示正在发生的事情。我在图像周围使用了span标签，以便在滑块中的图像下方启用文本字段，以使文本随图像一起变化。它有效，但现在我使用缩略图作为它破坏的寻呼机。

有没有办法让他们使用span标签？

编辑 - js我正在使用我的页面：

<script type="text/javascript">
$(document).ready(function() {

$('.slideshow')

.cycle({
    fx: 'fade', speed:  2500, pause:   1, next:   '#next', 
prev:   '#prev',  pager:  '#pagernav',
// callback fn that creates a thumbnail to use as pager anchor 
pagerAnchorBuilder: function(idx, slide) { 
   return '<a href="#"><img src="' + $(slide).attr('rel') + '" width="50" height="26" /></a>'; 
}


});


$('#pauseButton').click(function() { 
$('.slideshow').cycle('pause'); 

});

$('#resumeButton').click(function() { 
$('.slideshow').cycle('resume'); 

});

});
</script>

Answer 1

http://jsfiddle.net/2gktS/25/

Slide是整个幻灯片对象，包括span标记。你需要从对象中获取img标签。

jQuery构造函数接受第二个参数，该参数可用于覆盖选择的上下文。

jQuery("img", slide);

与

相同

jQuery(slide).find("img");

所以对于你的剧本：

pagerAnchorBuilder: function(i, slide) {
        var src = $("img", slide).attr("rel");

        return '<a href="#"><img src="' + src + '" width="50" height="50" /></a>';
    }

Answer 2

尝试使用Flow Slider，它非常简单，适用于任何内部HTML代码。