Question

我创建一个带有Revolution滑块的网站，但滑块的图像首先加载，然后加载所有内容，然后只有滑块工作..

在滑块加载之前，看起来很难看到所有图像一目了然......

我已经尝试过多次更改css，但没有任何效果..

http://livedesignstudios.com/glor-original/

<div class="fullwidthbanner-container">
                    <div class="fullwidthbanner">
                        <ul>
                            <!-- THE FIRST SLIDE -->
                            <li data-transition="fade" data-slotamount="1" data-masterspeed="500" data-thumb="images/thumbs/thumb3.jpg">
                                        <img alt="glow" title="designova" src="images/slides/slide5_wide.jpg" >

                                        <div class="caption modern_big_bluebg lfb"  
                                             data-x="380" 
                                             data-y="60" 
                                             data-speed="500" 
                                             data-start="1500" 
                                             data-easing="easeOutExpo">The Pocket Computer</div>
                                        <div class="caption modern_small_text_dark sfb"  
                                             data-x="420" 
                                             data-y="110" 
                                             data-speed="500" 
                                             data-start="1800" 
                                             data-easing="easeOutExpo">USB OS made for Children but <br>Good enough for Military</div>
                                        <div class="caption lfl"  
                                            data-x="480" 
                                            data-y="170" 
                                            data-speed="500" 
                                            data-start="2100" 
                                            data-easing="easeOutExpo" ><img alt="downloadfree" title="downloadfree" src="images/slides/downloadfree.png"></div>         

</div>              
                            </li>

Answer 1

我设法通过在第一张图片上使用内联样式设置opacity: 0;来解决此问题。

Answer 2

$(".fullwidthbanner").hide();
$(".fullwidthbanner").delay(100).fadeIn(0);

Answer 3

看来你在关闭李之前关闭了你的div。

    <div class="fullwidthbanner">
        <ul>
            <!-- THE FIRST SLIDE -->
            <li data-transition="fade" data-slotamount="1" data-masterspeed="500" data-thumb="images/thumbs/thumb3.jpg"><img alt="glow" title="designova" src="images/slides/slide5_wide.jpg">

                <div class="caption modern_big_bluebg lfb" data-x="380" data-y="60" data-speed="500" data-start="1500" data-easing="easeOutExpo">The Pocket Computer</div>
                <div class="caption modern_small_text_dark sfb" data-x="420" data-y="110" data-speed="500" data-start="1800" data-easing="easeOutExpo">
                    USB OS made for Children but <br>Good enough for Military
                </div>
                <div class="caption lfl" data-x="480" data-y="170" data-speed="500" data-start="2100" data-easing="easeOutExpo">
                    <img alt="downloadfree" title="downloadfree" src="images/slides/downloadfree.png">
                </div>
            </li>
        </ul>
    </div>

另外，请尝试更改加载脚本的顺序。在加载革命滑块javascript之前，由于加载了一堆其他脚本，我遇到了类似的问题。

革命滑块图像首先加载，然后只有滑块

3 个答案: