使Nivo Slider在负载时淡入淡出

Question

嘿,我想按以下顺序加载Nivo Slider:

1. 幻灯片出现之前,会显示loading.gif.
2. 一旦幻灯片准备出现,它们就会淡出.

Nivo Slider的调用函数如下所示:

$(window).load(function() { /* ///// start WINDOW load ///// */
$('#slider').nivoSlider({
    effect:'random', //Specify sets like: 'fold,fade,sliceDown'
    slices:12,
    animSpeed:500, //Slide transition speed
    pauseTime:3000,
    startSlide:0, //Set starting Slide (0 index)
    directionNav:false, //Next & Prev
    directionNavHide:true, //Only show on hover
    controlNav:false, //1,2,3...
    controlNavThumbs:false, //Use thumbnails for Control Nav
    controlNavThumbsFromRel:false, //Use image rel for thumbs
    controlNavThumbsSearch: '.jpg', //Replace this with...
    controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
    keyboardNav:true, //Use left & right arrows
    pauseOnHover:true, //Stop animation while hovering
    manualAdvance:false, //Force manual transitions
    captionOpacity:0.8, //Universal caption opacity
    beforeChange: function(){},
    afterChange: function(){},
    slideshowEnd: function(){}, //Triggers after all slides have been shown
    lastSlide: function(){}, //Triggers when last slide is shown
    afterLoad: function(){} //Triggers when slider has loaded
});

});

使用此CSS语句显示loading.gif,该语句位于nivo-slider.css文件中:

#slider {
 background: #eee url(../images/nivo-loader.gif) no-repeat 50% 50%;
 position: relative;
 width: 960px; height: 328px;
}
#slider img {
 position: absolute;
 top: 0px;
 left: 0px;
 display: none;
}

我认为这样做的方法是使用内置的afterLoad参数,如下所示:afterLoad(function() { $(this).fadeIn(); });但是这没有用.

所以我真的很感激任何想法!谢谢!

更新:

HTML非常简单(与大多数Nivo滑块的布局一样):

<div id="slider" class="box"> <!-- Image/video top box (cinema) -->
            <img src="assets/images/cinema/slide1.jpg" />
            <img src="assets/images/cinema/slide2.jpg" />
            <img src="assets/images/cinema/slide3.jpg" />
            <img src="assets/images/cinema/slide4.jpg" />
        </div>

当我使用afterLoad参数时没有任何反应; loading.gif出现,但然后图像严重显示(没有我喜欢的fadeIn()).所以基本上,一切都有效,但我只是希望这些图像在节目准备开始后淡入.然后,他们应该简单地滑动他们的随机过渡(就像现在一样).

Answer 1

我要做的是用滑块覆盖滑块并使用nivo的afterLoad功能在包含的图像上进行想要的动画,而不是slider持有者.这是我如何做到的:

<div id="wrapper">
    <div id="slider" class="box">
        <img src="assets/images/cinema/slide1.jpg" />
        <img src="assets/images/cinema/slide2.jpg" />
        <img src="assets/images/cinema/slide3.jpg" />
        <img src="assets/images/cinema/slide4.jpg" />
    </div>
    <div id="preloader">
        <img src="assets/images/nivo-loader.gif" />
    </div>
</div>

现在使用CSS,您将使用与相对位置相关的绝对位置将预加载器覆盖在滑块上wrapper:

#wrapper { position:relative; }
#preloader {
 background:#eee;
 position:absolute; top:0; left:0; z-index:51; /* z-index greater than #slider */
 width:960px; height:328px;
}
#preloader img {
 padding:150px 0 0 470px; /* unknown img size, but adjust so centered */
}
#slider {
 background: #eee url(../images/nivo-loader.gif) no-repeat 50% 50%;
 position: relative; z-index:50; /* set z-index as appropriate to your site */
 width: 960px; height: 328px;
}
#slider img {
 position: absolute;
 top: 0px;
 left: 0px;
 display: none;
}

然后,nivo滑块将具有所有适当的调用,然后afterLoad将在滑块内的图像上包含淡入淡出动画:

$('#slider').nivoSlider({
    ...lots of properties then...
    afterLoad: function(){
        var $slider = $('#slider img');
        $slider.css('opacity',0);
        $('#preloader').fadeOut(500, function(){
           $slider.animate({'opacity':1}, 500);
        });
    }
});

如果你想要交叉淡入淡出,那么你afterLoad可以看起来像:

$('#slider').nivoSlider({
    ...lots of properties then...
    afterLoad: function(){
        $('#preloader').fadeOut(500);
    }
});

这将避免您弹出图像时遇到的任何问题.