Question

我有一个内置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>';
    }
});  
});

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

});

}）;

Answer 1

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

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

Answer 2

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

jQuery Cycle pagerAnchorBuilder

Answer 3

参考JVerstry的评论（很好的一个JV顺便说一句！），我得到了以下正常使用图像和<a>链接。寻呼机拇指还显示主图像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>';

Answer 4

似乎是一个常见的问题！查看cycle with anchors并循环播放“slideExpr”

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

4 个答案: