0

Flexslider を使用して、Wordpress を使用してホームページのスライドショーを作成しています。スライドショーの速度を入力する機能のオプションは既に作成しています。個々のスライドごとにこれらのスライドショーの速度をループするにはどうすればよいですか?

$options[] = array( "name" => __('Banner 1 Speed','themetrust'),
                    "desc" => __('Enter speed in seconds for banner 1.','themetrust'),
                    "id" => "ttrust_home_banner_speed1",
                    "type" => "text");  
$options[] = array( "name" => __('Banner 2 Speed','themetrust'),
                    "desc" => __('Enter speed in seconds for banner 2.','themetrust'),
                    "id" => "ttrust_home_banner_speed2",
                    "type" => "text");


<?php $slideshow_delay = of_get_option('ttrust_slideshow_delay'); ?>
<?php $autoPlay = ($slideshow_delay != "0") ? 1 : 0; ?>
<?php $slideshow_effect = of_get_option('ttrust_slideshow_effect'); ?>

<script type="text/javascript">
//<![CDATA[

jQuery(window).load(function() {            
    jQuery('.flexslider').flexslider({
        slideshowSpeed: <?php echo $slideshow_delay . '000'; ?>,  
        directionNav: true,
        slideshow: <?php echo $autoPlay; ?>,                                
        animation: '<?php echo $slideshow_effect; ?>',
        animationLoop: true
    });  
});

//]]>
</script>
4

1 に答える 1

3

これは FlexSlider でサポートされている機能ではないと確信しているため、これを回避する方法を次に示します。

<?php $speed1 = intval( of_get_option( 'ttrust_home_banner_speed1' ) );
$speed2 = ( of_get_option( 'ttrust_home_banner_speed2' ) );
$speed1 = $speed1 ? $speed1 * 1000 : 6000; // Default duration of 6 seconds
$speed2 = $speed2 ? $speed2 * 1000 : 6000; // Default duration of 6 seconds

$slideshow_effect = of_get_option('ttrust_slideshow_effect'); ?>

<script type="text/javascript">
//<![CDATA[

jQuery(window).load(function() {
    var delays = [ <?php echo $speed1; ?>, <?php echo $speed2; ?> ],
        _curr_index = 0,
        _delay = false, 
        _aa_timeout = null,
        _auto_advancing = false;

    jQuery('.flexslider').flexslider({
        slideshowSpeed: 0,
        directionNav: true,
        slideshow: false,
        animation: '<?php echo $slideshow_effect; ?>',
        animationLoop: true,
        after: function( slider ){
            // If we weren't advancing to the next slide from the auto_advance_slide() function(from user controls for instance), we need to fix some things
            if ( ! _auto_advancing ) {
                clearTimeout( _aa_timeout ); // Clear the auto advance timeout
                _curr_index = slider.currentSlide; // Fix the current index
            };
            // Set-up the next timer for auto advancing
            auto_advance_slide();
        }
    });

    function auto_advance_slide() {
        if ( typeof( delays[ _curr_index ] ) != 'undefined' ) {
            _delay = delays[ _curr_index ];
        } else {
            _delay = delays[ 0 ];
            _curr_index = 0;
        };

        // Set time out to switch to next slide
        _aa_timeout = setTimeout( function(){
            _auto_advancing = true;
            // Switch to next slide.
            jQuery('.flexslider').flexslider('next');

            _auto_advancing = false;
        }, _delay );

        // Increase the current index. 
        _curr_index ++;
    }

    auto_advance_slide();
});

//]]>
</script>

基本的に、最初に各スライドのデュレーションを取得し (後で変数やオプションを追加できます)、適切な値であることを確認します (を使用intval()して値を整数に変換し、そうでない場合falseは01000 を掛けます)。ミリ秒値を取得します)。

JavaScript で、いくつかの変数を作成します。

  1. delays- これは、すべてのスライドの遅延を含む配列です。
  2. _curr_index- これは、現在のスライド (およびdelays) インデックスを保持します。
  3. _delay- この変数は後で使用しますが、ここで設定します
  4. _aa_timeout- この変数は、後で使用するタイムアウトへの参照を保持します
  5. _auto_advancing- これはフラグ変数になり、関数を介して進んでいるか、ユーザーが FlexSlider ナビゲーションを使用したかを示します。

FlexSlider をセットアップするときは、スクリプトからスライドを進めるため、スライドショーを設定しません。afterまた、Flexsliderの「イベント」のコールバック関数も追加します。これは、各スライドのアニメーションが完了した後に実行されます。そこで、スライダーを次のスライドに進めるタイムアウトを設定し、ユーザーがスライダー コントロールを使用したかどうか、または独自のスクリプトから次のスライドに進んだかどうかを確認します。

auto_advance_slide()次に、次のスライドに進むためのタイムアウトを実際に設定する関数を定義します。

PP:私はこの機能をテストしていません。テストして、機能しないかどうか教えてください (できれば、FireBug または Chrome の開発者コンソールに表示されるもの)。

于 2012-12-09T20:11:26.780 に答える