2012-11-11 38 views
-1

忍受我,這可能需要一點解釋。如果我沒有清楚地解釋清楚,我會提前道歉。jQuery問題與淡出行動加倍

我建立一個jQuery滑塊(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); 

    } 
} 
} 

回答

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裏面的功能,它以某種方式確保它不會翻倍。任何人都有解釋?當按下按鈕時,我還會自動暫停幻燈片上的自動運行,以確保它不會變得醜陋,我相信用戶不會介意他們是否想要自己的速度。