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

problems with the slider using html and javascript

本文关键字:问题 html javascript 使用      更新时间:2023-09-26

我在网站中使用了滑块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     -->

滑块中的第二个li有一个style="display:block"。如果你去掉它,它可能会起作用。