0

我正在使用 Wordpress 使用 Flexslider 创建主页幻灯片。我已经创建了输入幻灯片速度的选项。如何循环播放每张幻灯片的幻灯片放映速度？

$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，则将其0乘以 1000获得毫秒值）。

在您的 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 回答