當jQuery的.load（）方法加載到頁面上時，jQuery幻燈片無法正常工作

Question

everyone。我是很新的jQuery和WordPress的，所以請善待:)

我的問題涉及到這個網站，這是我正在做一個朋友的樂隊：http://ecbiz119.inmotionhosting.com/~fullbo6/

他們希望用戶能夠在音樂播放時點擊該網站。所以我試圖使用jQuery的.load（）方法異步加載其他頁面的內容。 （不太理想，我知道，但這是我能想到的最好的。）

頁面初始加載時，主頁上的幻燈片顯示效果很好。但是，當它重新加載時，動畫會跳過。我搜索了高和低的解決方案，但沒有運氣。

這裏是用來進行幻燈片放映工作代碼：

$('#slide-show > li:gt(0)').hide(); 
setInterval(function() { 
    $('#slide-show > li:first') 
     .fadeOut(1000) 
     .next() 
     .fadeIn(1000) 
     .end() 
     .appendTo('#slide-show'); 
}, 5000); 

當用戶點擊未在家鄉鏈路的任何鏈接，下面的代碼執行。 （以「jspPane」的引用JScrollPane的插件，使內容的div滾動）：

$('#main-nav').not('.page-item-6').find('a').on('click', function (e) { 
    e.preventDefault(); 
    var href = $(this).attr('href'); 
    $('#main-nav a').removeClass('active'); 
    $(this).addClass('active'); 
    $('#slide-show-container, #updates-wrap .container').empty(); 
    $('.jspPane').empty().load(href + ' .page-content'); 
    $('#page-content-container').show(); 
}); 

當點擊主頁鏈接，下面的代碼執行（它基本上只是以上，但在相反的）：

$('#main-nav .page-item-6').find('a').on('click', function (e) { 
    e.preventDefault(); 
    var href = $(this).attr('href'); 
    $('#main-nav a').removeClass('active'); 
    $(this).addClass('active'); 
    $('#slide-show-container').load(href + ' #slide-show'); 
    $('#page-content-container').hide(); 
}); 

在此先感謝任何人可以提供的見解。對此，我真的非常感激！

更新：現在這裏是完整的代碼。

jQuery(document).ready(function($) { 

startSlideShow(); 

function startSlideShow(){ 
    $('#slide-show > li:gt(0)').hide(); 
    setInterval(function() {  
     $('#slide-show > li:first') 
     .fadeOut(1000) 
     .next() 
     .fadeIn(1000) 
     .end() 
     .appendTo('#slide-show'); 
    }, 5000); 
} 


$('#page-content-container').jScrollPane().hide(); 

$('#main-nav .page-item-6 a').addClass('active'); 

$('#main-nav').not('.page-item-6').find('a').on('click', function(e){ 
    e.preventDefault(); 
    var href = $(this).attr('href'); 
    $('#main-nav a').removeClass('active'); 
    $(this).addClass('active'); 
    $('#slide-show-container, #updates-wrap .container').empty().hide(); 
    $('.jspPane').empty().load(href + ' .page-content'); 
    $('#page-content-container').show(); 
}); 

$('#main-nav .page-item-6').find('a').on('click', function (e) { 
    e.preventDefault(); 
    var href = $(this).attr('href'); 
    $('#main-nav a').removeClass('active'); 
    $(this).addClass('active'); 
    $('#slide-show-container').load(href + ' #slide-show', function(){ 
      startSlideShow(); 
    }); 
    $('#slide-show-container, #updates-wrap .container').show(); 
    $('#page-content-container').hide(); 
});  

}）;

Answer 1

您是否嘗試調用加載完成後進行幻燈片放映的方法？

$('.jspPane').empty().load(href + ' .page-content',function(){ 
    StartSlideShow(); 

}); 

，並在您StartSlideShow方法，有代碼爲幻燈片放映

function StartSlideShow() 
{ 
    // Code for the slide show 
}