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

Posted 2023-02-26

【中文标题】Jquery 循环 - 如何在不破坏缩略图寻呼机的情况下将图像包装在跨度标签中？

【英文标题】：Jquery cycle - How can I wrap my images in span tags without breaking the thumbnail pager?

【发布时间】：2012-07-25 10:07:25

【问题描述】：

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') + '"   /></a>'; 



);


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

);

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

);

);
</script>

【参考方案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 + '"   /></a>';
    

【参考方案2】：

尝试使用Flow Slider，它超级简单，几乎适用于任何内部 html 代码。