Question

大家。我是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'的引用是使内容div可滚动的jScrollPane插件）：

$('#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
}

使用jQuery的.load（）方法加载到页面上时，jQuery幻灯片无法正常工作

1 个答案: