Question

我正在使用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>

Answer 1

我很确定这不是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中，您可以创建几个变量。

delays - 这是一个包含所有幻灯片延迟的数组。
_curr_index - 这包含当前幻灯片（和delays）索引。
_delay - 我们稍后会使用此变量，但我们会在此处进行设置
_aa_timeout - 此变量将保留对我们稍后将在
_auto_advancing - 这将是一个标志变量，标记我们是通过我们的函数推进，还是用户使用了FlexSlider导航。

当您设置FlexSlider时，您不设置幻灯片，因为我们将从我们的脚本推进幻灯片。您还为Flexslider的after“事件”添加了一个回调函数 - 它在每个幻灯片的动画完成后执行。我们设置了超时，将滑块推进到下一张幻灯片并检查用户是否使用了滑块控件，或者我们已经从我们自己的脚本前进到下一张幻灯片。

然后我们定义auto_advance_slide()函数，它实际设置了前进到下一张幻灯片的时间。

PP：我没有测试过该功能，有些请测试一下，告诉我它是否无法正常工作（最好是你在FireBug或Chrome的开发者控制台中看到的）。

如何使用Flexslider更改每张幻灯片的幻灯片播放速度？

1 个答案: