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

【问题标题】：On page load, instead of displaying first slide, last slide gets displayed for around less than a second在页面加载时，不是显示第一张幻灯片，而是显示最后一张幻灯片大约不到一秒钟
【发布时间】：2014-09-03 22:31:02
【问题描述】：

我正在使用 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 () {}

};

谁能告诉我为什么会发生这种情况？

【问题讨论】：

标签： javascript jquery nivo-slider

【解决方案1】：

我对相应 .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">

【讨论】：