Question

我正在通过动态生成的div来循环，这些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。我只是想知道如何实现这一点。

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/

jQuery循环：在循环div时生成寻呼机缩略图

1 个答案: