-1

请耐心等待,这可能需要一点解释。如果我没有清楚地解释它,我提前道歉。

我正在为一个客户端项目构建一个 jQuery Slider(wordpress 插件),并涉及以下功能:

  • 一组幻灯片一次加载一组
  • 播放/暂停
  • 下一张幻灯片/上一张幻灯片
  • 下一组/上一组
  • 自动播放

略有不同的是,它只有一个标题/描述组合的幻灯片“组”。然后,您不仅可以在每个组的不同幻灯片之间导航,还可以在组本身之间导航。

我的问题是,在我暂停幻灯片的自动运行并再次恢复后,next_slide() 操作执行了两次(淡出/淡入淡出/淡入),几乎就像 setTimeout() 本身加倍一样.

编辑:现在,每当执行 next_slide() 操作时,它似乎就会发生,而不仅仅是在我之前认为的播放/暂停之后。幻灯片编号不会前进,而是将同一图像淡化两次。我已经将相同的图像向上堆叠了 4 次,但不知道为什么。我为混乱道歉。

可能是因为我的 .live('click') 事件只是调用 next_slide() 它正在堆积吗?

注意- 我清除了一些代码以提高可读性,例如用于触发前端按钮和 set_information 函数的函数的 .click 事件。据我所知,它们不是我问题的根源。

任何帮助将不胜感激。什么会导致 next_slide() 函数的双重作用?随意在其他方面批评我的代码,我知道它远非完美:

function build_slideshow(grouplist){

    var group_array = jQuery.parseJSON(grouplist); // parse AJAX returned JSON

    var n = 0; //group counter
    var x = 0; //slide counter
    var length = group_array.length - 1; //amount of groups
    var count; // number of slides in group
    var size; // size of window (to pull proper image sizes)
    var autorun = null;

    window_size(); // set size variable for later use
    slideshow_init(); //start the slideshow


    /* ------- FUNCTIONS  -------- */

    /*
    checks window.width for AJAX call
    */

    function window_size(){     
        window_size = $j(window).width();

        switch(true){
            case(window_size > 980):
            size = 'large';
            break;

            case(window_size > 480 && window_size < 980):
            size = 'med';
            break;

            case(window_size < 480):
            size = 'small';
            break;
       }
    }

    function slideshow_init(){
        set_information(); //places Title, Desc, and Slider nav buttons
        get_slides(group_array[n].id); //builds slideshow for group
    }




    function get_slides(group_id){

        $j.post(myAjax.ajaxurl, {action:"get_slides_list", groupid:group_id, size:size}, function(result){

            slide_data = jQuery.parseJSON(result); 
            count = slide_data.length;
            if(autorun) clearTimeout(autorun); //resets the setTimeout from previous group
            x = 0; //resets the counter from previous group

           $j('.slideshow div').hide();
           $j('.slideshow div').html(slide_data[x]).fadeIn(700); //loads first slide

           if(play == true){ //possible that user paused the slideshow last group
               setTimeout(slideshow_autorun, 6000); //autoruns if not
           }
        });
     }


    function next_slide(){
        x++;

        (x == count) ? x = 0 : x = x; //loops to front if last slide

       $j('.slideshow div').fadeOut( 700 ,  function() {
       $j(this).html(slide_data[x]);
       }).fadeIn(700);
    }

    function previous_slide(){
        x--;

        (x <  0) ? x = (count - 1) : x = x; // loops to back if first slide

        $j('.slideshow div').fadeOut( 700 ,  function() {
        $j(this).html(slide_data[x]);
        }).fadeIn(700);
    }

    function next_group(){
        n++;

        (n > length) ? n = 0 : n = n; //loops to front if last group
        slideshow_init();
    }

    function previous_group(){
        n--;

        (n < 0) ? n = length : n = n; //loops to back if first group
        slideshow_init();
    }

    function play_slideshow(){
         play = true;

         slideshow_autorun();
    } 

    function pause_slideshow(){
        if(autorun) clearTimeout(autorun);

        play = false;    
    }

    function slideshow_autorun(){
        if(play == true){
        next_slide();

        autorun = setTimeout(slideshow_autorun, 6000);

    }
}
}
4

1 回答 1

0

我想出了“如何”,但我仍然不确定“为什么”。

next_slide() 函数是问题所在:

function next_slide(){
   x++;

    (x == count) ? x = 0 : x = x;

   $j('.slideshow div').fadeOut( 700 ,  function() {
    $j(this).html(slide_data[x]);
   }).fadeIn(700);

}

我将其更改为,这似乎解决了问题:

function next_slide(){
   x++;

    (x == count) ? x = 0 : x = x;

   $j('.slideshow div').fadeOut( 700 ,  function() {
    $j(this).html(slide_data[x]).fadeIn(700);
   });

}

通过在函数内部移动 .fadeIn,它以某种方式确保它不会加倍。有人有解释吗?当按下按钮时,我还自动暂停了幻灯片上的自动运行,以确保它不会变得丑陋,我相信用户无论如何都不会介意他们想要自己的速度。

于 2012-11-11T22:23:04.620 回答