我在我的网站http://webpcsupport247.com/中使用了一个滑块。在页面加载时,我遇到了滑块图像显示在滑块区域下方的问题,片刻之后滑块工作正常。这是一个简单的 html 网站。请在这方面帮助我:
我的滑块代码是这样的:
<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 -->