Question

我正在使用jQuery CameraSlider，它工作正常，但是当页面加载时，分页图标会闪烁在包含div的顶部，而客户端热衷于看到它们消失。代码实际上正在做它已构建的内容。但是，如果可能的话，我仍然想让分页图标不会在加载时闪烁。

Here是相关网页。

我已经确定了需要控制的元素，并且我找到了一个我认为是我所追求的脚本，但是我无法让它完全按照我想要的方式完成。

通过在样式中设置此元素“to display：none;我没有分页，所以我知道这些是要控制的元素。

.camera_wrap .camera_pag .camera_pag_ul li {
    background: #929497;     
}

我的脚本中的这一行在5秒后关闭了分页，所以我知道我可以控制它，我不能反过来 - 在5秒之后出现，或者是可接受的时间。

setTimeout(function() { $('.camera_pag_ul li').hide() }, 5000);

我认为以下内容可能会在5秒后显示分页图标，但事实并非如此。

<script type="text/javascript">

    $(document).ready(function() {
        setTimeout(function() { $('.camera_pag_ul li').show() }, 5000);
    });

</script>

我也尝试过这种方法而没有成功。

<style>.camera_pag_ul li{display:none;}</style>

$(window).load(function() {
  // When the page has loaded
$("camera_pag_ul li").show(5000);
});

这是我的脚本，因为它们显示在页面底部。

<script src="js/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.js"><\/script>')</script>
    <!-- Camera Slideshow -->
    <script type='text/javascript' src='scripts/jquery.mobile.customized.min.js'></script>
    <script type='text/javascript' src='js/slider/camera1920.js'></script>

    <script type="text/javascript">
        $(function(){

                //dropdown navigation
                $('#navigation_horiz').naviDropDown({
                        dropDownWidth: '165px'  //adjusted to longest title in dropdown = Corporate Responsibility

                });

                //Add bounce effect on Hover to class                    
        $('.imgHover').mouseenter(function () {
                      $(this).effect("bounce", { distance: 3, times:1 }, 900);
                });

                //camera slideshow
                jQuery('#camera_wrap_1').camera({               

            thumbnails: false,  //true will make thumbnails of the image appear on hovering over pagination dots
            pagination: true


        });

        setTimeout(function() { $('.camera_wrap .camera_pag .camera_pag_ul li').hide() }, 5000);   //This works so why can't I get it to do the opposite??

        });
</script>

我不介意我是怎么做的，我只是希望能够让它们消失，直到页面加载完毕。

我找到了解决方案 - 这就是：

通过包装器引用控件：

CSS
.camera_pag {
  display: none;
}

然后控制脚本中显示的元素= show一旦加载了页面。

JS
jQuery('#camera_wrap_1').camera({       
    /*/     /*sets the height */
    thumbnails: false,  
    pagination: true,
    onLoaded: function() {
        $(".camera_pag").show(); // or .fadeIn();
    }
});

需要隐藏加载内容

0 个答案: