jQuery Cycle 插件 pagerAnchorBuilder 图像变得未定义答案

【问题标题】：jQuery Cycle plugin pagerAnchorBuilder images becoming undefinedjQuery Cycle 插件 pagerAnchorBuilder 图像变得未定义
【发布时间】：2010-03-18 17:39:50
【问题描述】：

我有一个内置在 Flash 中的幻灯片，我想在 jQuery 中模仿。幻灯片放映使用幻灯片放映中的图像作为寻呼机号码。我遇到的问题是，一旦我将链接应用到幻灯片图像，pagerAnchorBuilder 图像就会返回未定义的图像源代码。

Javascript -

$(function() {
$('#slideshow').before('<ul id="nav">').cycle({
    fx:     'fade',
    timeout: 7000,
    pager:  '#nav',
    pagerAnchorBuilder: function(idx, slide) {
    return '<li><a href="#"><img src="' + slide.src + '" width="100" height="60" /></a></li>';
    }
});  
});

HTML -

<div id="slideshow" class="pics"> 
    <a href="http://google.com"><img src="home_1.jpg" width="1000" height="600" /></a>
    <a href="http://google.com"><img src="home_2.jpg" width="1000" height="600" /></a>
    <a href="http://google.com"><img src="home_3.jpg" width="1000" height="600" /></a> 
    <a href="http://google.com"><img src="home_4.jpg" width="1000" height="600" /></a> 
    <a href="http://google.com"><img src="home_5.jpg" width="1000" height="600" /></a> 

</div>

如果我从幻灯片中删除href，则寻呼机中的图像显示没有问题。我不确定这是一个错误还是我需要找到修复的东西？

这就是答案——

$(function() {
$('#slideshow').before('<ul id="nav">').cycle({
    fx:     'fade',
    timeout: 7000,
    pager:  '#nav',
    pagerAnchorBuilder: function(idx, slide) {
      var img = $(slide).children().eq(0).attr("src");
      return '<li><a href="#"><img src="' + img + '" width="100" height="60" /></a></li>';
    }

});

});

【问题讨论】：

标签： javascript jquery html cycle undefined

【解决方案1】：

我使用JQuery.find() 来帮助查找图像，并保持代码足够模块化以用于不同的标记：

pagerAnchorBuilder: function(idx, slide) {
    return '<li><a href="#"><img src="'
        + jQuery(slide).find('img').attr('src')
        + '" width="120" /></a></li>'; 
}

【讨论】：

【解决方案2】：

阅读本文可能对您有所帮助！

jQuery Cycle pagerAnchorBuilder

【讨论】：

【解决方案3】：

参考 JVerstry 的评论（顺便说一句，不错的一个 JV！），我得到了以下使用图像和<a>link 的情况。寻呼机拇指也显示主图像 alt 属性：

return '<li class="slider-thumb"><a href="'+slide.href+'" id="pager-click" title="'+slide.title+'"><img src="'+ $(slide).find('img').attr('src')+'" width="90" height="69" class="fader" /></a><p class="slide-caption">'+ $(slide).find('img').attr('alt')+'</p></li>';

【讨论】：

【解决方案4】：

似乎是一个普遍的问题！查看cycle with anchors 以及循环的“slideExpr”

【讨论】：