2

私は単純な 3 つの画像のスライド ショーを作成しています。Jquery と Cycle は初めてです。スライドショーが機能しており、3 つのページャー リンクも機能します。

私が達成する必要がある唯一のことは、現在選択されているページャーの画像に「activeSlide」機能を追加することです.アクティブなページャーの画像ソースを変更したいので、activeSlide クラスを使用するだけでは CSS では実行できません.. .一方、デフォルトで単純なテキスト番号である場合は、activeSlide クラスのスタイルを設定します。

基本的に、アクティブなスライド ページャーに到達したときに、test-select-off.jpg を test-select-on.jpg と交換したいと考えています。

サイクル コード:

$(function() {
    $('#testimonial-features').cycle({  
        speed: 800,
            timeout: '6500',
            pause: 'true',
            pager: '#testimonial-switcher',
            pagerAnchorBuilder: function(idx, slide) { 
             return '#testimonial-switcher li:eq(' + idx + ') a';       
            } 
    });
});

HTML コード:

<div id="testimonial-switcher">
<ul>
    <li><a href="#"><img src="images/layout/test-select-off.jpg" /></a></li>
    <li><a href="#"><img src="images/layout/test-select-off.jpg" /></a></li>
    <li><a href="#"><img src="images/layout/test-select-off.jpg" /></a></li>
</ul>

これどうやってするの？http://www.malsup.com/jquery/cycle/pager7.htmlから取得した updateActivePagerLink 関数を変更して、 updateActivePagerLink オプションで何かを行う必要があると思います。

$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { 
    $(pager).find('li').removeClass('activeLI') 
        .filter('li:eq('+currSlideIndex+')').addClass('activeLI'); 
};

しかし、私が言ったように、私はまだこの構文を学んでいるので、どんな助けも大歓迎です!

4

1 に答える 1

0

編集：どうやら、私はプラグインに精通していなかったので、私の元の答えは機能しませんでした。ただし、部分的に機能するものを見つけたので、完全に機能するはずのソリューションでここで回答を更新します。あなたが見つけたものに加えてあなたがしなければならないのは、その関数の始めにそれらをすべて「オフ」（1行目）に変更し、次にアクティブなものを「オン」（あなたが追加したもの）に変更することです。

$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {
    $(pager).find('img').attr('src','images/layout/test-select-on.jpg');
    $(pager).find('li').removeClass('activeLI') 
            .filter('li:eq('+currSlideIndex+')').addClass('activeLI')
            .find('img').attr('src','images/layout/test-select-on.jpg'); 
};

それがうまくいくかどうか教えてください。

元の間違った答え（コメントが意味をなすように残しておく）コールバック関数内にクラスがある方の内
のを置き換えることができるようです（私は以前にCycleプラグインを使用したことがなく、その最後のビットを収集していますがドキュメント）。srcimgli.activeLIafter

したがって、サイクルコードを次のように変更します。

$(function() {
    $('#testimonial-features').cycle({  
        speed: 800,
        timeout: '6500',
        pause: 'true',
        pager: '#testimonial-switcher',
        pagerAnchorBuilder: function(idx, slide) { 
         return '#testimonial-switcher li:eq(' + idx + ') a';       
        },
        after: function(curr, next, opts) {
         $(curr).find('img').attr('src','images/layout/test-select-on.jpg');
        } 
    });
});

そして、それがうまくいくかどうか私に知らせてください！（注：これが機能しない場合は、$()からをアンラップしてみてください...私が言ったように、以前にこのプラグインを使用したことはありませんcurr）after: function()

于 2010-06-04T19:06:52.057 に答える