Question

我有一个简单的幻灯片，只有3个幻灯片标题，如下所示：

<div id="sliderHeader_container" style="position: relative; width: 965px; height: 85px;">

    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width:965px; height:85px; overflow: hidden;">
        <!-- Slide -->
        <div>
            <div u="caption" t="L|EP" style="position: absolute; top: 0px; left: 0px; width: 965px; height: 85px;">
                <div style="position: absolute; top: 13px; left: 0px; width: 965px; height: 85px; color: Black; font-size: 19px; line-height: 25px; text-align: center;">
                    CAPTION 1
                </div>
            </div>
        </div>
        <!-- Slide -->
        <div>
            <div u="caption" t="R|EP" style="position: absolute; top: 0px; left: 0px; width: 965px; height: 85px;">
                <div style="position: absolute; top: 0px; left: 220px; width: 965px; height: 85px; color: Black; font-size: 16px; line-height: 17px; text-align: left;">
                    CAPTION 2
                </div>
            </div>
        </div>
        <!-- Slide -->
        <div>
            <div u="caption" t="SPACESHIP|LB" style="position: absolute; top: 0px; left: 0px; width: 965px; height: 85px;">
                <div style="position: absolute; top: 15px; left: 0px; width: 965px; height: 85px; color: Black; font-size: 18px; line-height: 20px; text-align: center;">
                    CAPTION 3
                </div>
            </div>
        </div>
    </div>
</div>

有时（通常在第一次加载页面时，或在慢速移动设备上），所有三个标题一起显示（重叠）一小段时间（少于1秒）。之后，幻灯片按预期开始。

这是我的初始化代码：

jQuery(document).ready(function ($) {
        var _CaptionTransitions = [];
        _CaptionTransitions["L|EP"] = {$Duration:1200,$FlyDirection:1,$Easing:{$Left:$JssorEasing$.$EaseInOutExpo},$ScaleHorizontal:0.6,$Opacity:2};
        _CaptionTransitions["R|EP"] = {$Duration:1200,$FlyDirection:2,$Easing:{$Left:$JssorEasing$.$EaseInOutExpo},$ScaleHorizontal:0.6,$Opacity:2};
        _CaptionTransitions["SPACESHIP|LB"] = {$Duration:1200,$Zoom:3,$Rotate:-0.1,$FlyDirection:9,$Easing:{$Left:$JssorEasing$.$EaseInQuint,$Top:$JssorEasing$.$EaseInWave,$Opacity:$JssorEasing$.$EaseInQuint},$ScaleHorizontal:1,$ScaleVertical:0.1,$Opacity:2};

        var options = {
            $AutoPlay: true,
            $DragOrientation: 1,
            $SlideDuration: 0,
            $AutoPlayInterval: 10000,
            $CaptionSliderOptions: {
                $Class: $JssorCaptionSlider$,
                $CaptionTransitions: _CaptionTransitions,
                $PlayInMode: 1,
                $PlayOutMode: 3
            }
        };

        var jssor_slider_header = new $JssorSlider$("sliderHeader_container", options);
    });

任何人都有同样的行为吗？我想知道是否有办法隐藏所有字幕，直到Jssor幻灯片准备好开始。

提前致谢。

Answer 1

在页面加载时看起来就像你说的那样。您可以不使用jquery版本立即运行jssor滑块而无需等待加载。

或者你可以只显示一张幻灯片并在开头隐藏（style =“display：none;”）其他幻灯片。

<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width:965px; height:85px; overflow: hidden;">
    <!-- Slide -->
    <div>
        <div u="caption" t="L|EP" style="position: absolute; top: 0px; left: 0px; width: 965px; height: 85px;">
            <div style="position: absolute; top: 13px; left: 0px; width: 965px; height: 85px; color: Black; font-size: 19px; line-height: 25px; text-align: center;">
                CAPTION 1
            </div>
        </div>
    </div>
    <!-- Slide -->
    <div style="display: none;">
        <div u="caption" t="R|EP" style="position: absolute; top: 0px; left: 0px; width: 965px; height: 85px;">
            <div style="position: absolute; top: 0px; left: 220px; width: 965px; height: 85px; color: Black; font-size: 16px; line-height: 17px; text-align: left;">
                CAPTION 2
            </div>
        </div>
    </div>
    <!-- Slide -->
    <div style="display: none;">
        <div u="caption" t="SPACESHIP|LB" style="position: absolute; top: 0px; left: 0px; width: 965px; height: 85px;">
            <div style="position: absolute; top: 15px; left: 0px; width: 965px; height: 85px; color: Black; font-size: 18px; line-height: 20px; text-align: center;">
                CAPTION 3
            </div>
        </div>
    </div>
</div>

Jssor Slider：在幻灯片开始之前，字幕重叠很短的时间

1 个答案: