1

基本上我已经创建了一个带有 jquery 循环的幻灯片，它具有按钮和寻呼机导航 - 每次按下“下一个”或“上一个”按钮时，寻呼机都会更新以表示正在显示哪张幻灯片。现在我想在幻灯片中添加一个计时器并再次更新寻呼机导航图像以表示正在显示哪张幻灯片。我试过使用 timeoutFn，但我无法让它工作。这是目前的一些代码-我正在使用全局变量'currentBut'，所以我知道我当前在哪张幻灯片上。

$(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();
        }

    });

但是我现在对如何适应它有点困惑——任何想法都将不胜感激！谢谢。

4

0 回答 0