0

このサイトでは、「supersized.js」と「jquery cycle」の 2 つのプラグインを使用しています。

http://countrypleasin.com/new/

超大型の背景アニメーションを見出しのイメージ サイクルと同期させたいと考えています。(ドキュメント). 準備ができて希望的観測は、これまでのところそれをカットしていません. 読み込み時間のため、ヘッドラインは 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,

});

});

4

1 に答える 1

0

私はまったく同じ問題を抱えていて、アニメーションを開始する前にいくつかの読み込み条件を追加することでそれを機能させることができました。これを行うにはおそらくもっとエレガントな方法がありますが、これは少なくとも機能します！

まず、$（document）.readyではなく$（window）.load（）で2つのアニメーションを開始して、すべての画像が最初に読み込まれるようにし、次の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 に答える