Question

我将Jssor Slider设置为显示2张幻灯片，问题是最后一张幻灯片在Internet Explorer 9中加载时会短暂显示。如何防止上次幻灯片的这种简短外观？（我知道它显示的是最后一面而不是第二张幻灯片，因为我已尝试过其他数量的幻灯片）。 http://www.jssor.com/demos/content-slider.html是我用来轻松创建滑块的模板。我想我在修改模板时引起了这个问题，但还没有找到它。这是我的幻灯片容器：

            <!-- Slides Container -->
            <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 970px; 
                height: 255px; overflow: hidden;">
                <div>
                    <img src="/includes/jssor/country_en_nolink.jpg" alt="description" style="position: absolute; top: 0px; left: 0px; width: 970px; height: 255px;" />
                    <img u="thumb" src="/includes/jssor/country_en_nolink_thumb.jpg" />
                </div>                 
                <div>                        
                    <a href="/pb/index.html"><img src="/includes/jssor/KM-Banner-970x255.jpg" alt="description 2" style="position: absolute; top: 0px; left: 0px; width: 970px; height: 255px;" /></a>
                    <img u="thumb" src="/includes/jssor/KM-Banner-970x255-thumb.jpg" />
                </div>
            </div>

Answer 1

如果使用jquery版本，jssor滑块将在文档加载后初始化并格式化ui。在初始化之前，它保留了原始html的原始外观。

要修改原始html的外观，您可以指定＆＃39; position：absolute;顶部：... px;左：... px;＆＃39;任何幻灯片/缩略图显示/隐藏它。

以下代码将显示第一张幻灯片并隐藏其他幻灯片。并且您可以在初始化之前通过样式＆＃39; position：absolute;隐藏缩略图;顶部：0px; left：-300px;＆＃39;。

        <!-- Slides Container -->
        <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 970px; 
            height: 255px; overflow: hidden;">
            <div style="position: absolute; top: 0px; left: 0px;">
                <img src="/includes/jssor/country_en_nolink.jpg" alt="description" style="position: absolute; top: 0px; left: 0px; width: 970px; height: 255px;" />
                <img style="position: absolute; top: 0px; left: -300px;" u="thumb" src="/includes/jssor/country_en_nolink_thumb.jpg" />
            </div>
            <div style="position: absolute; top: -255px; left: 0px;">
                <a href="/pb/index.html"><img src="/includes/jssor/KM-Banner-970x255.jpg" alt="description 2" style="position: absolute; top: 0px; left: 0px; width: 970px; height: 255px;" /></a>
                <img style="position: absolute; top: 0px; left: -300px;" u="thumb" src="/includes/jssor/KM-Banner-970x255-thumb.jpg" />
            </div>
        </div>

请参阅http://www.jssor.com/testcase/content-slider.source.html

Jssor - 如何防止上载幻灯片在加载时短暂显示？

1 个答案: