在页面加载时，不是显示第一张幻灯片，而是显示最后一张幻灯片不到一秒钟

On page load, instead of displaying first slide, last slide gets displayed for around less than a second

本文关键字：幻灯片 显示 一张 一秒钟 最后 加载      更新时间：2023-09-26

我正在使用NivoSlider，遇到了这个问题：

加载页面时，不是显示第一张幻灯片（正如我设置的startSlide:0），而是显示最后一张幻灯片（有时是图像集中的其他图像）不到一秒钟。

我相信，到那时滑块还没有正确启动，因为当滑块真正启动时，只能看到第一个子弹的控制。

以下是我的代码：

    n.fn.nivoSlider.defaults = {
    effect : "sliceDownRight",
    slices : 15,
    boxCols : 8,
    boxRows : 4,
    animSpeed : 500,
    pauseTime : 5e3,
    startSlide : 0,
    directionNav : !0,
    controlNav : !0,
    controlNavThumbs : !1,
    pauseOnHover : !0,
    manualAdvance : !1,
    prevText : "Prev",
    nextText : "Next",
    randomStart : !1,
    overflow : "hidden",
    beforeChange : function () {},
    afterChange : function () {},
    slideshowEnd : function () {},
    lastSlide : function () {},
    afterLoad : function () {}
};

有人能告诉我为什么会发生这种事吗？

我在各自的.cshtml文件中对代码进行了以下更改：

（1）加载函数的更改：

原件：

$(window).load(function () {
    $('#nivo-slider').nivoSlider();
});

修改：

$(window).load(function () {
    //$('#nivo-slider').nivoSlider();
    /*show() is needed to avoid the issue of last slide getting 
    displayed on page load */
    $('#nivo-slider').show().nivoSlider({
    effect: 'sliceDownRight',
    slices: 15,
    boxCols: 8,
    boxRows: 4,
    animSpeed: 500,
    pauseTime: 5e3,
    startSlide: 0, 
    startSlide : 0,
    directionNav : !0,
    controlNav: !0,
    controlNavThumbs: !1,
    pauseOnHover: !0,
    manualAdvance: !1,
    prevText: "Prev",
    nextText: "Next",
    randomStart: !1,
    overflow: "hidden",
    beforeChange: function () { },
    afterChange: function () { },
    slideshowEnd: function () { },
    lastSlide: function () { },
    afterLoad: function () { }
    }); 
});

（2）滑块的div元素的打开标记的更改：

原件：

<div id="nivo-slider" class="nivoSlider">

修改：

<div id="nivo-slider" class="nivoSlider" style="display: none">
相关文章：