1

我正在使用 jQuery CameraSlider，它工作正常，但是当页面加载时，分页图标会在包含 div 的顶部闪烁，并且客户很想看到它们消失。代码实际上是在做它被构建做的事情。但是，如果可能的话，我仍然希望这样做，以便分页图标在加载时不会闪烁。

这是有问题的页面。

我已经确定了需要控制的元素，并且我找到了一个我“认为”是我所追求的脚本，但我无法让它完全按照我的意愿去做。

通过在样式中将此元素设置为 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;
}

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

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

0 回答 0