javascript - jqueryサイクルでタイムアウトを使用するときにページャーアイコンを更新する方法

Question

基本的に、ボタンとページャー ナビゲーションを備えた jquery サイクルでスライドショーを作成しました。「次へ」または「前へ」ボタンが押されるたびに、どのスライドが表示されているかを表すためにページャーが更新されます。次に、スライドショーにタイマーを追加し、ページャー ナビゲーション イメージを更新して、どのスライドが表示されているかを示します。timeoutFn を使用してみましたが、動作させることができませんでした。現時点でのコードの一部を次に示します。グローバル変数 'c​​urrentBut' を使用しているため、現在どのスライドを使用しているかがわかります。

$(document).ready(function() {

    var currentBut = "";
    var lastButIndex = 0;



    $('#slide').cycle({ 
    fx:     'scrollHorz',
    speed:  'slow', 
    timeout: 0, 
    next:   '#next', 
    prev:   '#previous',
    pager:  '#pager',
    pagerAnchorBuilder: function(idx, el) {

         lastButIndex = idx;
         return '<a src="" class="test" id="but'+idx+'"  href="#"><img src="gfx/slideshowBut.jpg"></a>';
     }
    });
    currentBut = $("#but0");
    currentBut.children(1).attr("src","gfx/slideshowButPressed.jpg"); 


    $("#next").click(function(){    


        $(currentBut).children(1).attr("src","gfx/slideshowBut.jpg");
        $(currentBut).next().children(1).attr("src","gfx/slideshowButPressed.jpg");

        if($(currentBut).is(':last-child'))
        {
            $("#but0").children(1).attr("src","gfx/slideshowButPressed.jpg");
            currentBut = $("#but0");

        }
        else{
            currentBut = $(currentBut).next();
        }


    });

    $("#previous").click(function(){        
        $(currentBut).children(1).attr("src","gfx/slideshowBut.jpg");
        $(currentBut).prev().children(1).attr("src","gfx/slideshowButPressed.jpg"); 

        if($(currentBut).is(':first-child'))
        {               
            $("#but"+lastButIndex).children(1).attr("src","gfx/slideshowButPressed.jpg");
            currentBut = $("#but"+lastButIndex);
        }
        else{
            currentBut = $(currentBut).prev();
        }

    });

しかし、私は今それを適応させる方法に少しこだわっています-どんなアイデアでも大歓迎です!ありがとう.