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 に答える