0

我正在循环使用具有如下标记的动态生成的 div：

<div class="slider">

        <div class="servicesslider">    
               <a href="link1">
                <div class="slidertext">
                   <h1 class="sliderhead">Text1</h1>
                    <p>Body copy</p>
                </div>  
        <img width="450" height="270" src="imglink" class="attachment-front-page-services wp-post-image" alt="alt" title="title" />                     
                </a>

        </div>



       <div class="servicesslider"> 
          <a href="link2">
             <div class="slidertext">
            <h1 class="sliderhead">Text2</h1>
            <p>More body copy.</p>
             </div>
          <img width="450" height="270" src="imglink" class="attachment-front-page-services wp-post-image" alt="alt" title="title" />
           </a>

 </div>

我设置了寻呼机功能，该功能为每个 div 生成 1、2、3、4 等链接。我正在尝试关注为每张幻灯片生成缩略图的高级寻呼机演示（见此处：http: //jquery.malsup.com/cycle/pager2.html）

我的 jQuery 看起来像这样，但回调函数破坏了效果。

<script type="text/javascript">
$(document).ready(function() {
$('.slider').cycle({
    fx:     'scrollHorz', 
    timeout: 4000,
    pager:  '#nav' 
    // callback fn that creates a thumbnail to use as pager anchor 
        pagerAnchorBuilder: function(idx, slide) { 
            return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>'; 
        }
});
});
</script>

参考：http: //jsfiddle.net/txhPK/6/

问题是我无法让寻呼机工作或使用该技术生成缩略图。我想这是因为在演示中他们只是在图像中循环，所以抓取幻灯片的 img src 很容易，在我的情况下，它需要从 div 中获取图像 src。我只是想知道如何实现这一目标。

4

1 回答 1

0

您需要进行修改并搜索图像。假设图像始终具有相同的类，并且您只需要一个是代码。

$('.slider').cycle({
    fx:     'scrollHorz', 
    timeout: 4000,
    pager:  '#nav' 
    // callback fn that creates a thumbnail to use as pager anchor 
        pagerAnchorBuilder: function(idx, slide) { 
            return '<li><a href="#"><img src="' + $('img.wp-post-image:eq(0)',slide).attr('src') + '" width="50" height="50" /></a></li>'; 
        }
});

类似 JSFiddle 示例：类似示例 http://jsfiddle.net/lucuma/vKG55/1/

于 2012-05-15T21:45:55.850 回答