0

我在这个网站上使用了两个插件“supersized.js”和“jquery cycle”。

http://countrypleasin.com/new/

我正在寻找与标题图像周期同步的超大背景动画。（文件）。到目前为止，一厢情愿的想法并没有削减它。由于加载时间，我的标题将比我的背景旋转稍早开始动画。

谢谢

$

        $(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,

});

});

4

1 回答 1

0

我刚刚遇到了完全相同的问题，并且能够通过在开始动画之前添加一些加载条件来使其工作。可能有一种更优雅的方法可以做到这一点，但这至少有效！

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

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

设置一个函数，我们可以调用它来在 jQuery Cycle 更改幻灯片之前推进超大幻灯片。它需要知道幻灯片的总数以确保它正确循环。（可能有一种无需手动输入即可计算的方法）

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 自动停止。

于 2013-03-01T00:44:46.670 回答