基于Nivo Slider的幻灯片设计 – 17款Nivo Slider皮肤下载

screenshot1213

Nivo Slider是一款基于JQuery的轻量级幻灯片插件,使用很方便。最近很想了解用这个简便易用的脚本可以做出多少种样式各异的幻灯片,于是在网上搜索了一下,有不少收获。把自己觉得不错的幻灯片效果做成了皮肤,想直接看效果的朋友移步Nivo Slider实例展示,提供源代码下载。

为了获得最佳浏览效果,请使用最新版本的浏览器(支持CSS 3特效)浏览。

总的来说,定制Nivo Slider就是设计背景、导航条、方向导航、缩略图导航以及描述部分,将这几个部分的位置设计进行调整,结合JQuery的动画特效以及设计精美的图片,就可以做出很漂亮的效果。例如:

1. 通过定制图片导航和描述部分做出的效果

如何使Nivo Slider支持Cufon

Nivo Slider最新版(v2.7.1)支持Cufon的方法如下。

打开jquery.nivo.slider.js,找到如下代码,(line99-line118)

// Process caption function
var processCaption = function(settings){
    var nivoCaption = $('.nivo-caption', slider);
    if(vars.currentImage.attr('title') != '' && vars.currentImage.attr('title') != undefined){
        var title = vars.currentImage.attr('title');
        if(title.substr(0,1) == '#') title = $(title).html();	
 
        if(nivoCaption.css('opacity') != 0){
            nivoCaption.find('p').stop().fadeTo(settings.animSpeed, 0, function(){
                $(this).html(title);
                $(this).stop().fadeTo(settings.animSpeed, 1);
            });
        } else {
            nivoCaption.find('p').html(title);
        }
        nivoCaption.stop().fadeTo(settings.animSpeed, settings.captionOpacity);
    } else {
        nivoCaption.stop().fadeTo(settings.animSpeed, 0);
    }
}

替换成如下代码