请耐心等待,这可能需要一点解释。如果我没有清楚地解释它,我提前道歉。
我正在为一个客户端项目构建一个 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);
}
}
}