我将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>
答案 0 :(得分: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>