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

时间:2014-09-03 22:31:02

标签: javascript jquery nivo-slider

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

};

任何人都可以告诉我为什么会这样吗?

1 个答案:

答案 0 :(得分:0)

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