让supersize.js和jquery循环同时动画

我在这个网站上使用了两个插件supersize.js和jquery cycle

我希望得到超大背景动画同步与标题图像周期。文档准备和一厢情愿的想法到目前为止还不能解决这个问题。由于加载时间的原因，我的标题将比bg旋转开始的时间稍早一些

谢谢

美元

---

})

我遇到了完全相同的问题，在开始动画之前，通过添加一些加载条件，我可以让它工作。也许有一种更优雅的方法可以做到这一点，但这至少是可行的

首先在$window.load而不是$document.ready上启动两个动画，以确保首先加载所有图像，使用以下API调用设置超级大小的暂停状态：

$(function(){
//pause supersized slideshow
api.playToggle();
});

设置一个函数，在jQuery循环更改幻灯片之前，我们可以调用该函数来推进超大幻灯片放映。它需要知道幻灯片的总数，以确保正确循环。也许有一种方法可以计算，而不必手动输入

var $i = 1;
var $slideTotal = 3;

function slideAdvance()
{
    api.goTo($i);
    $i++;
    if ($i > $slideTotal)
    {
        $i = 1;
    }
}

然后，您可以设置jquery循环以在更改幻灯片之前运行函数，如下所示：

//Start animated banner
$('#banner').cycle({
    fx: 'scrollRight', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    speed:   400,
    timeout: 5000,
    delay:    1000,
    autostop:      true,     // true to end slideshow after X transitions (where X == slide count) 
    autostopCount: 25,
    before: slideAdvance
});

瞧，这是你的同步横幅。这还增加了一个额外的好处，即超级大小将使用jquery自动停止

//Start animated banner
$('#banner').cycle({
    fx: 'scrollRight', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    speed:   400,
    timeout: 5000,
    delay:    1000,
    autostop:      true,     // true to end slideshow after X transitions (where X == slide count) 
    autostopCount: 25,
    before: slideAdvance
});