滑块使用html和javascript时出现问题

滑块使用html和javascript时出现问题,javascript,jquery,html,Javascript,Jquery,Html,我在我的网站上使用了一个滑块。在页面加载时,我遇到了一个问题,即滑块图像显示在滑块区域下方,几分钟后滑块工作正常。这是一个简单的html网站。请在这方面帮助我: 我的slider代码如下所示: <script type="text/javascript"> jQuery(function () { var Page294 = (function () { var $navArrows = jQuery('#nav-arrows294')

我在我的网站上使用了一个滑块。在页面加载时,我遇到了一个问题,即滑块图像显示在滑块区域下方,几分钟后滑块工作正常。这是一个简单的html网站。请在这方面帮助我:

我的slider代码如下所示:

<script type="text/javascript">
    jQuery(function () {
        var Page294 = (function () {
            var $navArrows = jQuery('#nav-arrows294').hide(), $navDots = jQuery('#nav-dots294').hide(), $nav = $navDots.children('span'),
slicebox = jQuery('#ju-dslider294').slicebox({
    onReady: function () { $navArrows.show(); $navDots.show(); },
    onBeforeChange: function (pos) { $nav.removeClass('nav-dot-current'); $nav.eq(pos).addClass('nav-dot-current'); },
    orientation: 'v',
    perspective: 1200,
    cuboidsCount: 7,
    cuboidsRandom: true,
    maxCuboidsCount: 7,
    disperseFactor: 10,
    colorHiddenSides: '#222',
    sequentialFactor: 150,
    speed: 600,
    easing: 'ease',
    autoplay: true,
    interval: 5000,
    fallbackFadeSpeed: 300
}),
init = function () {
    initEvents();
},
initEvents = function () {
    // add navigation events
    $navArrows.children(':first').on('click', function () {
        slicebox.next();
        return false;
    });
    $navArrows.children(':last').on('click', function () {
        slicebox.previous();
        return false;
    });
    $nav.each(function (i) {
        jQuery(this).on('click', function (event) {
            var $dot = jQuery(this);
            if (!slicebox.isActive()) {
                $nav.removeClass('nav-dot-current');
                $dot.addClass('nav-dot-current');
            }
            slicebox.jump(i + 1);
            return false;
        });
    });
};
            return { init: init };
        })();
        Page294.init();
    });
</script>

<!-- start 3d slider -->
<div class="ju-dslider-wrapper">
<ul id="ju-dslider294" class="ju-dslider" style="margin: 0px auto; padding: 0px; position: relative; overflow: hidden; width: 100%; list-style-type: none; max-width: 960px;">
<li class="" style="display: none;">
<a href="" target="_blank">
<img src="Home_files/slider1.png" alt="">
</a>
</li>
<li class="ju-dcurrent" style="display: block;">
<img src="Home_files/slider3.png" alt="Lorem ipsum dolor sit amet, consetetur sad dunt ut labore et dolore magna aipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua">
<%--<div class="ju-ddescription">Lorem ipsum dolor sit amet, consetetur sad 
dunt ut labore et dolore magna aipscing elitr, sed diam nonumy eirmod 
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
voluptua</div>--%>
</li>
<li class="" style="display: none;">
<a href="" target="_self">
<img src="Home_files/slid3.png" alt="">
</a>
</li>
<li class="" style="display: none;">
<a href="" target="_self">
<img src="Home_files/slide4.png" alt=""/>
</a>
</li>
<li class="" style="display: none;">
<a href="" target="_self">
<img src="Home_files/slide5.png" alt=""/>
</a>
</li>
</ul>
<div style="display: block;" id="nav-dots294" class="nav-dots">
<span class=""></span>  
<span class="nav-dot-current"></span>
<span class=""></span>
<span class=""></span>
<span class=""></span>  
</div>  

</div>
<div style="clear:both;"></div>
<!-- end 3d slider --></div>

</div>



</div>


</div>

<!--      end slider     -->

jQuery(函数(){
var Page294=(函数(){
var$navArrows=jQuery('#nav-arrows294').hide(),$navDots=jQuery('#nav-dots294').hide(),$nav=$navDots.children('span'),
slicebox=jQuery('#ju-dslider294')。slicebox({
onReady:function(){$navArrows.show();$navDots.show();},
onBeforeChange:function(pos){$nav.removeClass('nav-dot-current');$nav.eq(pos.addClass('nav-dot-current');},
方向:“v”,
前景:1200,
长方体:7,
长方体随机体:是的,
最大立方英尺:7,
分散系数:10,
高密度染料:'#222',
顺序系数:150,
速度:600,,
放松:“放松”,
自动播放:对,
间隔时间:5000,
下降速度:300
}),
init=函数(){
initEvents();
},
initEvents=函数(){
//添加导航事件
$navArrows.children(“:first”).on('click',function(){
slicebox.next();
返回false;
});
$navArrows.children(':last')。on('click',function(){
slicebox.previous();
返回false;
});
$nav.每个(功能(i){
jQuery(this).on('click',函数(事件){
var$dot=jQuery(这个);
如果(!slicebox.isActive()){
$nav.removeClass('nav-dot-current');
$dot.addClass('nav-dot-current');
}
跳转(i+1);
返回false;
});
});
};
返回{init:init};
})();
Page294.init();
});

滑块中的第二个
li
有一个
style=“display:block”
。如果删除,它可能会工作。

我不确定,但尝试添加样式溢出:隐藏;