2

我有一个内置在 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，则寻呼机中的图像显示没有问题。我不确定这是一个错误还是我需要找到修复的东西？

这是答案 -

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

});

});

4

4 回答 4

3

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

pagerAnchorBuilder: function(idx, slide) {
    return '<li><a href="#"><img src="'
        + jQuery(slide).find('img').attr('src')
        + '" width="120" /></a></li>'; 
}
于 2010-10-06T09:31:21.513 回答
2

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

jQuery 循环寻呼机AnchorBuilder

于 2010-03-18T17:56:38.913 回答
1

<a>参考 JVerstry 的评论（顺便说一句，不错的一个 JV！），我得到了以下使用图像和链接的很好的结果。寻呼机拇指还显示主要图像 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>';
于 2012-11-07T12:57:23.580 回答
0

似乎是一个普遍的问题！查看带有锚点的循环以及循环的“slideExpr”

于 2010-03-24T20:31:46.520 回答