Javascript jQuery循环插件pagerAnchorBuilder图像变得未定义

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

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>';
    }
});  
});

$（函数（）{
$（“#幻灯片放映”）。在（“
”）之前。循环({
外汇：“淡出”，
超时：7000，
寻呼机：“#导航”，
pagerAnchorBuilder:函数（idx、幻灯片）{
返回“
”；
}
});  
});

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，则寻呼机中的图像将不会出现问题。我不确定这是一个bug还是我需要找到修复的东西

答案如下：

$(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>';
    }

});

$（函数（）{
$（“#幻灯片放映”）。在（“
”）之前。循环({
外汇：“淡出”，
超时：7000，
寻呼机：“#导航”，
pagerAnchorBuilder:函数（idx、幻灯片）{
var img=$（幻灯片）.children（）.eq（0）.attr（“src”）；
返回“
”；
}
});

---

}))

阅读此文章可能会对您有所帮助

---

似乎是一个常见的问题！查看cycle的“slideExpr”

我使用了

JQuery.find（）

来帮助查找图像，并保持代码模块化，以便与不同的标记一起使用：

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

pagerAnchorBuilder:函数（idx，幻灯片）{
返回“
”；
}

参考JVerstry的评论（顺便说一句，很好），我使用了图像和

'+$（slide）.find（'img'）.attr（'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>';