Question

请耐心等待，这可能需要一些解释。如果我不能清楚地解释清楚，我会事先道歉。

我正在为客户端项目构建一个jQuery Slider（wordpress插件），并涉及以下功能：

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

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

我的问题是，在我暂停幻灯片的自动运行并再次恢复后，next_slide（）动作被采取两次（淡出/淡入淡出/淡入），几乎如如果setTimeout（）自身加倍。

编辑：现在，只要采取了next_slide（）操作，它就会出现，而不仅仅是在我之前想到的播放/暂停之后。幻灯片编号不会前进，而是会使同一图像两次淡出。我把它叠加了相同的图像到4次，并且不知道为什么。我为这种困惑道歉。

可能是因为我的.live（'click'）事件只是调用next_slide（）它正在堆叠吗？

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

非常感谢任何帮助。什么会导致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);

    }
}
}

Answer 1

我想出'怎么样'，但我仍然不确定'为什么'。

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，它以某种方式确保它不会加倍。有人有解释吗？当按下按钮时我也会在幻灯片上自动暂停自动运行，以确保它不会变得难看，我相信如果他们想要自己的速度，用户也不会介意。

jQuery问题与淡入淡出动作加倍

1 个答案: