使supersized.js和jquery循环同时进行动画化

Question

我在这里使用两个插件"supersized.js“和"jquery循环”。

http://countrypleasin.com/new/

我想让超大的背景动画同步与标题图像周期。(文档)到目前为止，.ready和一厢情愿的想法并没有切断它。我的标题将开始稍微早于我的bg轮转，因为加载时间。

谢谢

$

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

                //Functionality
                slideshow               :   1,      //Slideshow on/off
                autoplay                :   1,      //Slideshow starts playing automatically
                start_slide             :   1,      //Start slide (0 is random)
                random                  :   0,      //Randomize slide order (Ignores start slide)
                slide_interval          :   5000,   //Length between transitions
                transition              :   1,      //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed        :   400,    //Speed of transition
                new_window              :   1,      //Image links open in new window/tab
                pause_hover             :   0,      //Pause slideshow on hover
                keyboard_nav            :   1,      //Keyboard navigation on/off
                performance             :   1,      //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                image_protect           :   1,      //Disables image dragging and right click with Javascript
                image_path              :   'images/', //Default image path

                //Size & Position
                min_width               :   0,      //Min width allowed (in pixels)
                min_height              :   0,      //Min height allowed (in pixels)
                vertical_center         :   0,      //Vertically center background
                horizontal_center       :   1,      //Horizontally center background
                fit_portrait            :   1,      //Portrait images will not exceed browser height
                fit_landscape           :   0,      //Landscape images will not exceed browser width

                //Components
                navigation              :   0,      //Slideshow controls on/off
                thumbnail_navigation    :   0,      //Thumbnail navigation
                slide_counter           :   0,      //Display slide numbers
                slide_captions          :   0,      //Slide caption (Pull from "title" in slides array)
                slides                  :   [       //Slideshow Images
                                                    {image : 'images/bg3.jpg'},  
                                                    {image : 'images/bg2.jpg'},
                                                    {image : 'images/bg1.jpg'}


                                            ]

            }); 
        });

        $(document).ready(function() {
$('h1.home_headline').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,

});

})；

Answer 1

我只是有完全相同的问题，并能够让它通过添加一些加载条件，然后开始动画。也许有一种更优雅的方法可以做到这一点，但这至少是可行的！

首先在$(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。