jquery - Jssor slider : Captions overlap for a short time before slideshow starts

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 slider ，而无需等待加载。

或者您可以只显示一张幻灯片并在开头隐藏 (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>