忍受我,這可能需要一點解釋。如果我沒有清楚地解釋清楚,我會提前道歉。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);
}
}
}