分享jquery实现百叶窗特效的图片轮播

首先非常感谢网友嘉翼的无私分享，这是他刚在网站扣下来的特效，第一时间与大家分享，jquery实现百叶窗特效的图片轮播

使用方法：

1、引用css文件，css文件里面已经做了注释，基本只需要修改宽高就好了，其他建议不需要修改。
2、引用js2个文件，一个jquery库，一个本特效插件jquery.nivo.slider.pack.js
3、引用html里面代码，代码很少，吧body里面代码全部拷贝，注意id重名，head里面还有一段插件调用的js

4、如果需要显示改图片介绍，可以在img里title里写，在给.nivo-caption p里面设置相关属性，我为了按钮下面的背景，吧文字隐藏了，完美兼容ie6-9,  火狐，谷歌，360,欧朋，遨游、注意额，低版本浏览器会有点卡，指ie6/7

 

页面初始化jquery代码如下：

jQuery(function($){
$(window).load(function() {
  $(\'#slider\').nivoSlider({
    directionNav: true,
    captionOpacity: 0.4,
    controlNav: true,
    boxCols: 8,
    boxRows: 4,
    slices: 15,
    effect:\'random\',
    animSpeed: 500,
    pauseTime: 3000 });
  });
});

完整的JS 代码：

/*
 * jQuery Nivo Slider v2.5.2
 * http://nivo.dev7studios.com
 *
 * Copyright 2011, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * March 2010
 */

(function($) {

    var NivoSlider = function(element, options){
        //Defaults are below
        var settings = $.extend({}, $.fn.nivoSlider.defaults, options);

        //Useful variables. Play carefully.
        var vars = {
            currentSlide: 0,
            currentImage: \'\',
            totalSlides: 0,
            randAnim: \'\',
            running: false,
            paused: false,
            stop: false
        };
    
        //Get this slider
        var slider = $(element);
        slider.data(\'nivo:vars\', vars);
        slider.css(\'position\',\'relative\');
        slider.addClass(\'nivoSlider\');
        
        //Find our slider children
        var kids = slider.children();
        kids.each(function() {
            var child = $(this);
            var link = \'\';
            if(!child.is(\'img\')){
                if(child.is(\'a\')){
                    child.addClass(\'nivo-imageLink\');
                    link = child;
                }
                child = child.find(\'img:first\');
            }
            //Get img width & height
            var childWidth = child.width();
            if(childWidth == 0) childWidth = child.attr(\'width\');
            var childHeight = child.height();
            if(childHeight == 0) childHeight = child.attr(\'height\');
            //Resize the slider
            if(childWidth > slider.width()){
                slider.width(childWidth);
            }
            if(childHeight > slider.height()){
                slider.height(childHeight);
            }
            if(link != \'\'){
                link.css(\'display\',\'none\');
            }
            child.css(\'display\',\'none\');
            vars.totalSlides++;
        });
        
        //Set startSlide
        if(settings.startSlide > 0){
            if(settings.startSlide >= vars.totalSlides) settings.startSlide = vars.totalSlides - 1;
            vars.currentSlide = settings.startSlide;
        }
        
        //Get initial image
        if($(kids[vars.currentSlide]).is(\'img\')){
            vars.currentImage = $(kids[vars.currentSlide]);
        } else {
            vars.currentImage = $(kids[vars.currentSlide]).find(\'img:first\');
        }
        
        //Show initial link
        if($(kids[vars.currentSlide]).is(\'a\')){
            $(kids[vars.currentSlide]).css(\'display\',\'block\');
        }
        
        //Set first background
        slider.css(\'background\',\'url("\'+ vars.currentImage.attr(\'src\') +\'") no-repeat\');

        //Create caption
        slider.append(
            $(\'<div class="nivo-caption"><p></p></div>\').css({ display:\'none\', opacity:settings.captionOpacity })
        );            
        
        // 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(\'display\') == \'block\'){
                    nivoCaption.find(\'p\').fadeOut(settings.animSpeed, function(){
                        $(this).html(title);
                        $(this).fadeIn(settings.animSpeed);
                    });
                } else {
                    nivoCaption.find(\'p\').html(title);
                }                    
                nivoCaption.fadeIn(settings.animSpeed);
            } else {
                nivoCaption.fadeOut(settings.animSpeed);
            }
        }
        
        //Process initial  caption
        processCaption(settings);
        
        //In the words of Super Mario "let\'s a go!"
        var timer = 0;
        if(!settings.manualAdvance && kids.length > 1){
            timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
        }

        //Add Direction nav
        if(settings.directionNav){
            slider.append(\'<div class="nivo-directionNav"><a class="nivo-prevNav">\'+ settings.prevText +\'</a><a class="nivo-nextNav">\'+ settings.nextText +\'</a></div>\');
            
            //Hide Direction nav
            if(settings.directionNavHide){
                $(\'.nivo-directionNav\', slider).hide();
                slider.hover(function(){
                    $(\'.nivo-directionNav\', slider).show();
                }, function(){
                    $(\'.nivo-directionNav\', slider).hide();
                });
            }
            $(slider).delegate(\'a.nivo-prevNav\',\'click\',function() {
                if(vars.running) return false;
                clearInterval(timer);
                timer = \'\';
                vars.currentSlide -= 2;
                nivoRun(slider, kids, settings, \'prev\');
            });

            $(slider).delegate(\'a.nivo-nextNav\',\'click\',function() {
                if(vars.running) return false;
                clearInterval(timer);
                timer = \'\';
                nivoRun(slider, kids, settings, \'next\');
            });

        }
        
        //Add Control nav
        if(settings.controlNav){
            var nivoControl = $(\'<div class="nivo-controlNav"></div>\');
            slider.append(nivoControl);
            for(var i = 0; i < kids.length; i++){
                if(settings.controlNavThumbs){
                    var child = kids.eq(i);
                    if(!child.is(\'img\')){
                        child = child.find(\'img:first\');
                    }
                    if (settings.controlNavThumbsFromRel) {
                        nivoControl.append(\'<a class="nivo-control" rel="\'+ i +\'"><img src="\'+ child.attr(\'rel\') + \'" alt="" /></a>\');
                    } else {
                        nivoControl.append(\'<a class="nivo-control" rel="\'+ i +\'"><img src="\'+ child.attr(\'src\').replace(settings.controlNavThumbsSearch, settings.controlNavThumbsReplace) +\'" alt="" /></a>\');
                    }
                } else {
                    nivoControl.append(\'<a class="nivo-control" rel="\'+ i +\'">\'+ (i + 1) +\'</a>\');
                }
                
            }
            //Set initial active link
            $(\'.nivo-controlNav a:eq(\'+ vars.currentSlide +\')\', slider).addClass(\'active\');

            $(slider).delegate(\'nivo-controlNav a\',\'click\',function() {
                if(vars.running) return false;
                if($(this).hasClass(\'active\')) return false;
                clearInterval(timer);
                timer = \'\';
                slider.css(\'background\',\'url("\'+ vars.currentImage.attr(\'src\') +\'") no-repeat\');
                vars.currentSlide = $(this).attr(\'rel\') - 1;
                nivoRun(slider, kids, settings, \'control\');
            });

        }
        
        //Keyboard Navigation
        if(settings.keyboardNav){
            $(window).keypress(function(event){
                //Left
                if(event.keyCode == \'37\'){
                    if(vars.running) return false;
                    clearInterval(timer);
                    timer = \'\';
                    vars.currentSlide-=2;
                    nivoRun(slider, kids, settings, \'prev\');
                }
                //Right
                if(event.keyCode == \'39\'){
                    if(vars.running) return false;
                    clearInterval(timer);
                    timer = \'\';
                    nivoRun(slider, kids, settings, \'next\');
                }
            });
        }
        
        //For pauseOnHover setting
        if(settings.pauseOnHover){
            slider.hover(function(){
                vars.paused = true;
                clearInterval(timer);
                timer = \'\';
            }, function(){
                vars.paused = false;
                //Restart the timer
                if(timer == \'\' && !settings.manualAdvance){
                    timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
                }
            });
        }
        
        //Event when Animation finishes
        slider.bind(\'nivo:animFinished\', function(){ 
            vars.running = false; 
            //Hide child links
            $(kids).each(function(){
                if($(this).is(\'a\')){
                    $(this).css(\'display\',\'none\');
                }
            });
            //Show current link
            if($(kids[vars.currentSlide]).is(\'a\')){
                $(kids[vars.currentSlide]).css(\'display\',\'block\');
            }
            //Restart the timer
            if(timer == \'\' && !vars.paused && !settings.manualAdvance){
                timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
            }
            //Trigger the afterChange callback
            settings.afterChange.call(this);
        });
        
        // Add slices for slice animations
        var createSlices = function(slider, settings, vars){
            for(var i = 0; i < settings.slices; i++){
                var sliceWidth = Math.round(slider.width()/settings.slices);
                if(i == settings.slices-1){
                    slider.append(
                        $(\'<div class="nivo-slice"></div>\').css({ 
                            left:(sliceWidth*i)+\'px\', width:(slider.width()-(sliceWidth*i))+\'px\',
                            height:\'0px\', 
                            opacity:\'0\', 
                            background: \'url("\'+ vars.currentImage.attr(\'src\') +\'") no-repeat -\'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +\'px 0%\'
                        })
                    );
                } else {
                    slider.append(
                        $(\'<div class="nivo-slice"></div>\').css({ 
                            left:(sliceWidth*i)+\'px\', width:sliceWidth+\'px\',
                            height:\'0px\', 
                            opacity:\'0\', 
                            background: \'url("\'+ vars.currentImage.attr(\'src\') +\'") no-repeat -\'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +\'px 0%\'
                        })
                    );
                }
            }
        }
        
        // Add boxes for box animations
        var createBoxes = function(slider, settings, vars){
            var boxWidth = Math.round(slider.width()/settings.boxCols);
            var boxHeight = Math.round(slider.height()/settings.boxRows);
            
            for(var rows = 0; rows < settings.boxRows; rows++){
                for(var cols = 0; cols < settings.boxCols; cols++){
                    if(cols == settings.boxCols-1){
                        slider.append(
                            $(\'<div class="nivo-box"></div>\').css({ 
                                opacity:0,
                                left:(boxWidth*cols)+\'px\', 
                                top:(boxHeight*rows)+\'px\',
                                width:(slider.width()-(boxWidth*cols))+\'px\',
                                height:boxHeight+\'px\',
                                background: \'url("\'+ vars.currentImage.attr(\'src\') +\'") no-repeat -\'+ ((boxWidth + (cols * boxWidth)) - boxWidth) +\'px -\'+ ((boxHeight + (rows * boxHeight)) - boxHeight) +\'px\'
                            })
                        );
                    } else {
                        slider.append(
                            $(\'<div class="nivo-box"></div>\').css({ 
                                opacity:0,
                                left:(boxWidth*cols)+\'px\', 
                                top:(boxHeight*rows)+\'px\',
                                width:boxWidth+\'px\',
                                height:boxHeight+\'px\',
                                background: \'url("\'+ vars.currentImage.attr(\'src\') +\'") no-repeat -\'+ ((boxWidth + (cols * boxWidth)) - boxWidth) +\'px -\'+ ((boxHeight + (rows * boxHeight)) - boxHeight) +\'px\'
                            })
                        );
                    }
                }
            }
        }

        // Private run method
        var nivoRun = function(slider, kids, settings, nudge){
            //Get our vars
            var vars = slider.data(\'nivo:vars\');
            
            //Trigger the lastSlide callback
            if(vars && (vars.currentSlide == vars.totalSlides - 1)){ 
                settings.lastSlide.call(this);
            }
            
            // Stop
            if((!vars || vars.stop) && !nudge) return false;
            
            //Trigger the beforeChange callback
            settings.beforeChange.call(this);
                    
            //Set current background before change
            if(!nudge){
                slider.css(\'background\',\'url("\'+ vars.currentImage.attr(\'src\') +\'") no-repeat\');
            } else {
                if(nudge == \'prev\'){
                    slider.css(\'background\',\'url("\'+ vars.currentImage.attr(\'src\') +\'") no-repeat\');
                }
                if(nudge == \'next\'){
                    slider.css(\'background\',\'url("\'+ vars.currentImage.attr(\'src\') +\'") no-repeat\');
                }
            }
            vars.currentSlide++;
            //Trigger the slideshowEnd callback
            if(vars.currentSlide == vars.totalSlides){ 
                vars.currentSlide = 0;
                settings.slideshowEnd.call(this);
            }
            if(vars.currentSlide < 0) vars.currentSlide = (vars.totalSlides - 1);
            //Set vars.currentImage
            if($(kids[vars.currentSlide]).is(\'img\')){
                vars.currentImage = $(kids[vars.currentSlide]);
            } else {
                vars.currentImage = $(kids[vars.currentSlide]).find(\'img:first\');
            }
            
            //Set active links
            if(settings.controlNav){
                $(\'.nivo-controlNav a\', slider).removeClass(\'active\');
                $(\'.nivo-controlNav a:eq(\'+ vars.currentSlide +\')\', slider).addClass(\'active\');
            }
            
            //Process caption
            processCaption(settings);
            
            // Remove any slices from last transition
            $(\'.nivo-slice\', slider).remove();
            
            // Remove any boxes from last transition
            $(\'.nivo-box\', slider).remove();
            
            if(settings.effect == \'random\'){
                var anims = new Array(\'sliceDownRight\',\'sliceDownLeft\',\'sliceUpRight\',\'sliceUpLeft\',\'sliceUpDown\',\'sliceUpDownLeft\',\'fold\',\'fade\',
                \'boxRandom\',\'boxRain\',\'boxRainReverse\',\'boxRainGrow\',\'boxRainGrowReverse\');
                vars.randAnim = anims[Math.floor(Math.random()*(anims.length + 1))];
                if(vars.randAnim == undefined) vars.randAnim = \'fade\';
            }
            
            //Run random effect from specified set (eg: effect:\'fold,fade\')
            if(settings.effect.indexOf(\',\') != -1){
                var anims = settings.effect.split(\',\');
                vars.randAnim = anims[Math.floor(Math.random()*(anims.length))];
                if(vars.randAnim == undefined) vars.randAnim = \'fade\';
            }
        
            //Run effects
            vars.running = true;
            if(settings.effect == \'sliceDown\' || settings.effect == \'sliceDownRight\' || vars.randAnim == \'sliceDownRight\' ||
                settings.effect == \'sliceDownLeft\' || vars.randAnim == \'sliceDownLeft\'){
                createSlices(slider, settings, vars);
                var timeBuff = 0;
                var i = 0;
                var slices = $(\'.nivo-slice\', slider);
                if(settings.effect == \'sliceDownLeft\' || vars.randAnim == \'sliceDownLeft\') slices = $(\'.nivo-slice\', slider)._reverse();
                
                slices.each(function(){
                    var slice = $(this);
                    slice.css({ \'top\': \'0px\' });
                    if(i == settings.slices-1){
                        setTimeout(function(){
                            slice.animate({ height:\'100%\', opacity:\'1.0\' }, settings.animSpeed, \'\', function(){ slider.trigger(\'nivo:animFinished\'); });
                        }, (100 + timeBuff));
                    } else {
                        setTimeout(function(){
                            slice.animate({ height:\'100%\', opacity:\'1.0\' }, settings.animSpeed);
                        }, (100 + timeBuff));
                    }
                    timeBuff += 50;
                    i++;
                });
            } 
            else if(settings.effect == \'sliceUp\' || settings.effect == \'sliceUpRight\' || vars.randAnim == \'sliceUpRight\' ||
                    settings.effect == \'sliceUpLeft\' || vars.randAnim == \'sliceUpLeft\'){
                createSlices(slider, settings, vars);
                var timeBuff = 0;
                var i = 0;
                var slices = $(\'.nivo-slice\', slider);
                if(settings.effect == \'sliceUpLeft\' || vars.randAnim == \'sliceUpLeft\') slices = $(\'.nivo-slice\', slider)._reverse();
                
                slices.each(function(){
                    var slice = $(this);
                    slice.css({ \'bottom\': \'0px\' });
                    if(i == settings.slices-1){
                        setTimeout(function(){
                            slice.animate({ height:\'100%\', opacity:\'1.0\' }, settings.animSpeed, \'\', function(){ slider.trigger(\'nivo:animFinished\'); });
                        }, (100 + timeBuff));
                    } else {
                        setTimeout(function(){
                            slice.animate({ height:\'100%\', opacity:\'1.0\' }, settings.animSpeed);
                        }, (100 + timeBuff));
                    }
                    timeBuff += 50;
                    i++;
                });
            } 
            else if(settings.effect == \'sliceUpDown\' || settings.effect == \'sliceUpDownRight\' || vars.randAnim == \'sliceUpDown\' || 
                    settings.effect == \'sliceUpDownLeft\' || vars.randAnim == \'sliceUpDownLeft\'){
                createSlices(slider, settings, vars);
                var timeBuff = 0;
                var i = 0;
                var v = 0;
                var slices = $(\'.nivo-slice\', slider);
                if(settings.effect == \'sliceUpDownLeft\' || vars.randAnim == \'sliceUpDownLeft\') slices = $(\'.nivo-slice\', slider)._reverse();
                
                slices.each(function(){
                    var slice = $(this);
                    if(i == 0){
                        slice.css(\'top\',\'0px\');
                        i++;
                    } else {
                        slice.css(\'bottom\',\'0px\');
                        i = 0;
                    }
                    
                    if(v == settings.slices-1){
                        setTimeout(function(){
                            slice.animate({ height:\'100%\', opacity:\'1.0\' }, settings.animSpeed, \'\', function(){ slider.trigger(\'nivo:animFinished\'); });
                        }, (100 + timeBuff));
                    } else {
                        setTimeout(function(){
                            slice.animate({ height:\'100%\', opacity:\'1.0\' }, settings.animSpeed);
                        }, (100 + timeBuff));
                    }
                    timeBuff += 50;
                    v++;
                });
            } 
            else if(settings.effect == \'fold\' || vars.randAnim == \'fold\'){
                createSlices(slider, settings, vars);
                var timeBuff = 0;
                var i = 0;
                
                $(\'.nivo-slice\', slider).each(function(){
                    var slice = $(this);
                    var origWidth = slice.width();
                    slice.css({ top:\'0px\', height:\'100%\', width:\'0px\' });
                    if(i == settings.slices-1){
                        setTimeout(function(){
                            slice.animate({ width:origWidth, opacity:\'1.0\' }, settings.animSpeed, \'\', function(){ slider.trigger(\'nivo:animFinished\'); });
                        }, (100 + timeBuff));
                    } else {
                        setTimeout(function(){
                            slice.animate({ width:origWidth, opacity:\'1.0\' }, settings.animSpeed);
                        }, (100 + timeBuff));
                    }
                    timeBuff += 50;
                    i++;
                });
            }  
            else if(settings.effect == \'fade\' || vars.randAnim == \'fade\'){
                createSlices(slider, settings, vars);
                
                var firstSlice = $(\'.nivo-slice:first\', slider);
                firstSlice.css({
                    \'height\': \'100%\',
                    \'width\': slider.width() + \'px\'
                });
    
                firstSlice.animate({ opacity:\'1.0\' }, (settings.animSpeed*2), \'\', function(){ slider.trigger(\'nivo:animFinished\'); });
            }          
            else if(settings.effect == \'slideInRight\' || vars.randAnim == \'slideInRight\'){
                createSlices(slider, settings, vars);
                
                var firstSlice = $(\'.nivo-slice:first\', slider);
                firstSlice.css({
                    \'height\': \'100%\',
                    \'width\': \'0px\',
                    \'opacity\': \'1\'
                });

                firstSlice.animate({ width: slider.width() + \'px\' }, (settings.animSpeed*2), \'\', function(){ slider.trigger(\'nivo:animFinished\'); });
            }
            else if(settings.effect == \'slideInLeft\' || vars.randAnim == \'slideInLeft\'){
                createSlices(slider, settings, vars);
                
                var firstSlice = $(\'.nivo-slice:first\', slider);
                firstSlice.css({
                    \'height\': \'100%\',
                    \'width\': \'0px\',
                    \'opacity\': \'1\',
                    \'left\': \'\',
                    \'right\': \'0px\'
                });

                firstSlice.animate({ width: slider.width() + \'px\' }, (settings.animSpeed*2), \'\', function(){ 
                    // Reset positioning
                    firstSlice.css({
                        \'left\': \'0px\',
                        \'right\': \'\'
                    });
                    slider.trigger(\'nivo:animFinished\'); 
                });
            }
            else if(settings.effect == \'boxRandom\' || vars.randAnim == \'boxRandom\'){
                createBoxes(slider, settings, vars);
                
                var totalBoxes = settings.boxCols * settings.boxRows;
                var i = 0;
                var timeBuff = 0;
                
                var boxes = shuffle($(\'.nivo-box\', slider));
                boxes.each(function(){
                    var box = $(this);
                    if(i == totalBoxes-1){
                        setTimeout(function(){
                            box.animate({ opacity:\'1\' }, settings.animSpeed, \'\', function(){ slider.trigger(\'nivo:animFinished\'); });
                        }, (100 + timeBuff));
                    } else {
                        setTimeout(function(){
                            box.animate({ opacity:\'1\' }, settings.animSpeed);
                        }, (100 + timeBuff));
                    }
                    timeBuff += 20;
                    i++;
                });
            }
            else if(settings.effect == \'boxRain\' || vars.randAnim == \'boxRain\' || settings.effect == \'boxRainReverse\' || vars.randAnim == \'boxRainReverse\' || 
                    settings.effect == \'boxRainGrow\' || vars.randAnim == \'boxRainGrow\' || settings.effect == \'boxRainGrowReverse\' || vars.randAnim == \'boxRainGrowReverse\'){
                createBoxes(slider, settings, vars);
                
                var totalBoxes = settings.boxCols * settings.boxRows;
                var i = 0;
                var timeBuff = 0;
                
                // Split boxes into 2D array
                var rowIndex = 0;
                var colIndex = 0;
                var box2Darr = new Array();
                box2Darr[rowIndex] = new Array();
                var boxes = $(\'.nivo-box\', slider);
                if(settings.effect == \'boxRainReverse\' || vars.randAnim == \'boxRainReverse\' ||
                   settings.effect == \'boxRainGrowReverse\' || vars.randAnim == \'boxRainGrowReverse\'){
                    boxes = $(\'.nivo-box\', slider)._reverse();
                }
                boxes.each(function(){
                    box2Darr[rowIndex][colIndex] = $(this);
                    colIndex++;
                    if(colIndex == settings.boxCols){
                        rowIndex++;
                        colIndex = 0;
                        box2Darr[rowIndex] = new Array();
                    }
                });
                
                // Run animation
                for(var cols = 0; cols < (settings.boxCols * 2); cols++){
                    var prevCol = cols;
                    for(var rows = 0; rows < settings.boxRows; rows++){
                        if(prevCol >= 0 && prevCol < settings.boxCols){
                            /* Due to some weird JS bug with loop vars 
                            being used in setTimeout, this is wrapped
                            with an anonymous function call */
                            (function(row, col, time, i, totalBoxes) {
                                var box = $(box2Darr[row][col]);
                                var w = box.width();
                                var h = box.height();
                                if(settings.effect == \'boxRainGrow\' || vars.randAnim == \'boxRainGrow\' ||
                                   settings.effect == \'boxRainGrowReverse\' || vars.randAnim == \'boxRainGrowReverse\'){
                                    box.width(0).height(0);
                                }
                                if(i == totalBoxes-1){
                                    setTimeout(function(){
                                        box.animate({ opacity:\'1\', width:w, height:h }, settings.animSpeed/1.3, \'\', function(){ slider.trigger(\'nivo:animFinished\'); });
                                    }, (100 + time));
                                } else {
                                    setTimeout(function(){
                                        box.animate({ opacity:\'1\', width:w, height:h }, settings.animSpeed/1.3);
                                    }, (100 + time));
                                }
                            })(rows, prevCol, timeBuff, i, totalBoxes);
                            i++;
                        }
                        prevCol--;
                    }
                    timeBuff += 100;
                }
            }
        }
        
        // Shuffle an array
        var shuffle = function(arr){
            for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
            return arr;
        }
        
        // For debugging
        var trace = function(msg){
            if (this.console && typeof console.log != "undefined")
                console.log(msg);
        }
        
        // Start / Stop
        this.stop = function(){
            if(!$(element).data(\'nivo:vars\').stop){
                $(element).data(\'nivo:vars\').stop = true;
                trace(\'Stop Slider\');
            }
        }
        
        this.start = function(){
            if($(element).data(\'nivo:vars\').stop){
                $(element).data(\'nivo:vars\').stop = false;
                trace(\'Start Slider\');
            }
        }
        
        //Trigger the afterLoad callback
        settings.afterLoad.call(this);
        
        return this;
    };
        
    $.fn.nivoSlider = function(options) {
    
        return this.each(function(key, value){
            var element = $(this);
            // Return early if this element already has a plugin instance
            if (element.data(\'nivoslider\')) return element.data(\'nivoslider\');
            // Pass options to plugin constructor
            var nivoslider = new NivoSlider(this, options);
            // Store plugin object in this element\'s data
            element.data(\'nivoslider\', nivoslider);
        });

    };
    
    //Default settings
    $.fn.nivoSlider.defaults = {
        effect: \'random\',
        slices: 15,
        boxCols: 8,
        boxRows: 4,
        animSpeed: 500,
        pauseTime: 3000,
        startSlide: 0,
        directionNav: true,
        directionNavHide: true,
        controlNav: true,
        controlNavThumbs: false,
        controlNavThumbsFromRel: false,
        controlNavThumbsSearch: \'.jpg\',
        controlNavThumbsReplace: \'_thumb.jpg\',
        keyboardNav: true,
        pauseOnHover: true,
        manualAdvance: false,
        captionOpacity: 0.8,
        prevText: \'Prev\',
        nextText: \'Next\',
        beforeChange: function(){},
        afterChange: function(){},
        slideshowEnd: function(){},
        lastSlide: function(){},
        afterLoad: function(){}
    };
    
    $.fn._reverse = [].reverse;
    
})(jQuery);

JS

完整的CSS代码：

/*
Theme Name: Quik Gallery
Theme URI: http://wpexplorer.com
Description: Gallery/Blog style theme by <a href="http://www.wpexplorer.com/">WPExplorer</a>
Author: AJ Clarke
Author URI: http://www.wpexplorer.com
Version: 1.0
*/

/* ----------------------  Reset Browser A Bit & Clear Floats -------------------------- */
*{margin:0; padding:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline}
a img, 
a{outline:0; border:0}

/* ----------------------  Body -------------------------- */
body{font-family: Helvetica, Tahoma, Arial, sans-serif; font-size:14px; line-height:24px; background:#fff}

/* ----------------------  HTML Elements -------------------------- */
a{text-decoration:none; border:0;}
a:hover{text-decoration:none;}







/* ---------------------- 百叶窗banner  -------------------------- */
#slider-wrap{width:990px; height:334px;}   /*可以修改宽高*/
#slider{position: relative; width:990px; height:334px; background:#FFF;} /*可以修改宽高*/
#slider img{position:absolute; top:0; left:0; display:none; width:990px; height: 334px;}/*可以修改宽高*/
.nivoSlider{position:relative;overflow: hidden;}
.nivoSlider img{position:absolute; top:0px; left:0px}
.nivoSlider a.nivo-imageLink{position:absolute; top:0px;display:block;left:0px;width:990px;height:334px;border:0;padding:0;margin:0;z-index:6;}/*可以修改宽高*/
.nivo-slice {display:block;position:absolute;z-index:5;height:100%;}
.nivo-box {display:block;position:absolute;z-index:5;}
.nivo-caption{position:absolute; left:0; bottom:0; background:#000;width:990px; z-index:50; height: 40px; }/*可以修改宽高*/
.nivo-caption p{width:990px;height: 40px; text-indent: -9999px}/*可以修改宽高*/
.nivo-controlNav{position:absolute; left:50%; bottom:10px; z-index: 100;}/*可以修改左右上下间距*/
.nivo-controlNav a{position:relative; z-index:99; cursor:pointer;background:#074d91}
.nivo-controlNav a.active{background:#ff6400;font-weight:bold}
.nivo-controlNav a{display:block; color: #fff; width:30px; height:20px; line-height: 20px; text-align: center; margin-right:3px; float:left; overflow: hidden;}/*可以修改宽高*/
.nivo-directionNav a {position:absolute;top:45%;z-index:9;cursor:pointer;}   /*左右切换按钮，不能删除，如果不需要可以设背景，删除会引起图片错位*/
.nivo-directionNav a {display:block;width:30px;height:30px;text-indent:-9999px;border:0;}
a.nivo-nextNav {right:15px;}
a.nivo-prevNav {left:15px;}

CSS

 

完整的HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>网友嘉翼分享jquery实现百叶窗特效的图片轮播</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script>
        window.jQuery || document.write(\'<script src="js/jquery-1.11.0.min.js" type="text/javascript"><\/script>\')
    </script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
jQuery(function($){
$(window).load(function() {
  $(\'#slider\').nivoSlider({
    directionNav: true,
    captionOpacity: 0.4,
    controlNav: true,
    boxCols: 8,
    boxRows: 4,
    slices: 15,
    effect:\'random\',
    animSpeed: 500,
    pauseTime: 3000 });
  });
});
</script>
</head>
<body>


<div id="slider-wrap">
  <div id="slider" class="nivoSlider">
      <a href="#" class="nivo-imageLink">
        <img src="http://ww1.sinaimg.cn/large/adde8400gw1ebewarzynaj20ri09amzx.jpg" alt="" title="a" width="990" height="334">
      </a>
      <a href="#" class="nivo-imageLink">
        <img src="http://ww3.sinaimg.cn/large/adde8400gw1ebewapkgl1j20ri09aq75.jpg" alt="" width="990" title="b"  height="334" >
      </a>
  </div>
</div>
<!-- /slider -->
</body>
</html>