jQuery的循环：通过具有这样的标记动态生成的div循环的div

Question

我循环时产生寻呼机缩略图：

<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> 

我有它设置了其产生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。我只是想知道如何做到这一点。

Answer 1

您需要对图像进行修改和搜索。假设图像总是具有相同的类别，并且您只需要一个这里是代码。

$('.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/