底部百叶窗代码

<style>
/* ---------------------- 百叶窗banner  -------------------------- */
#slider-wrap{width:960px; height:120px;}   /*可以修改宽高*/
#slider{position: relative; width:960px; height:120px; background:#FFF;} /*可以修改宽高*/
#slider img{position:absolute; top:0; left:0; display:none; width:960px; height: 120px;}/*可以修改宽高*/
.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:960px;height:120px;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; width:960px; z-index:50; height: 40px; }/*可以修改宽高*/
.nivo-caption p{width:960px;height: 40px; text-indent: -9999px}/*可以修改宽高*/
.nivo-controlNav{position:absolute; left:80%; 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;}
</style>
<script type="text/javascript" src="[!--news.url--]skin/default/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>
<div id="slider-wrap">
  <div id="slider" class="nivoSlider">
      <a href="/" class="nivo-imageLink">
        <img src="[!--news.url--]skin/default/images/1.jpg" alt="" title="a" width="960" height="120">
      </a>
<a href="/" class="nivo-imageLink">
        <img src="[!--news.url--]skin/default/images/3.jpg" alt="" width="960" title="b"  height="120" >
      </a>

     <a href="/" class="nivo-imageLink">
        <img src="[!--news.url--]skin/default/images/2.jpg" alt="" width="960" title="b"  height="120" >
      </a>

  </div>
</div>
jquery.nivo.slider.pack.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();
                });
            }

            $(‘a.nivo-prevNav‘, slider).live(‘click‘, function(){
                if(vars.running) return false;
                clearInterval(timer);
                timer = ‘‘;
                vars.currentSlide -= 2;
                nivoRun(slider, kids, settings, ‘prev‘);
            });

            $(‘a.nivo-nextNav‘, slider).live(‘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‘) + ‘"  /></a>‘);
                    } else {
                        nivoControl.append(‘<a class="nivo-control" rel="‘+ i +‘"><img src="‘+ child.attr(‘src‘).replace(settings.controlNavThumbsSearch, settings.controlNavThumbsReplace) +‘"  /></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‘);

            $(‘.nivo-controlNav a‘, slider).live(‘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);
时间: 2024-08-11 09:49:44

底部百叶窗代码的相关文章

当滚动条滚动到页面底部自动加载增加内容的js代码

这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; 2,相关获取页面高度.滚动条位置.文档高度的函数: 复制代码 代码如下://获取滚动条当前的位置 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentEle

在网页静态页面里面怎么跳转底部顶部的代码

跳到网页底部html代码: 在</body>前加个<a name="bottom"></a> 在任何地方写<a href="#bottom">跳到底部</a> 就可以实现点击回到底部: 返回网页顶部代码: <a href=#top>顶部</a> 在网页静态页面里面怎么跳转底部顶部的代码

常用的jquery触屏手机页面特效代码下载

js手机幻灯片代码制作手指滑动手机端图片轮播代码 jQuery移动端页面侧边导航菜单滑出效果代码 jquery.touchswipe.js手机端网页制作触屏滑动导航显示代码 jquery响应式幻灯片插件制作图片弹出手机幻灯片代码 jquery mobiscroll手机日期控件制作手机端日期控件 js手指滑动手机端列表加载动画效果 jquery手机导航菜单仿微信底部菜单代码 jquery html5手机触屏版点击弹出层对话框响应式网页布局代码 js手机端带进度条图片展示触屏滑动效果 jquery

Android开发关闭虚拟按钮、底部导航条

在Android开发中,遇到了一系列大大小小的问题,其中一个就是屏蔽底部实体键,我找了很多的博客也尝试了许许多多的方法,但始终不能屏蔽 HOME键,后来看见一篇博客说在Android 4.0以后,屏蔽底部HOME键必须反编译,修改Android底部原生代码,于是我便放弃了.废话不多说,我先分享一个屏蔽Android虚拟按键的方法,以及最简单的屏蔽Android的Back按钮,适合所有版本(未测试,感觉是这样): 1. Android 屏蔽Back按键 只需要重写 onKeyDown 方法就可以了

滑动到底部或顶部响应的ScrollView实现

关于使用可见:滚动到底部或顶部响应的ScrollView使用 示例APK可从这些地址下载:Google Play,  360手机助手,  百度手机助手,  小米应用商店,  豌豆荚 两种实现方式的主要不同点在于判断滑动位置的地方,第一种方式在onScrollChanged函数中判断, 第二种在OnTouchListener的onTouch中判断.其他如是否滚动到边缘的判断.响应事件接口OnBorderListener.对外暴露的接口都一样. 第一种方式代码可见onScrollChanged Bo

封装实践——打造微信底部tab栏

目前市面上很多App都采用底部一个Tab栏,管理四到五个Tab,然后选择切换页面的方式的设计,这虽然不太符合metro design,但确是一个不容易出错而又符合国人使用习惯的设计方式.比如微信,支付宝,网易新闻,简书等都采用这种设计.而所谓封装一定是基于某种确定的业务需求,所以针对上述的通用设计方式,我们可以做一个比较理想化的封装. 为什么要做封装 你可能会觉得,这就是一个选择切换嘛,我只要做些if else判断就好了.但是Tab栏一般用在首页,业务逻辑代码量就不用说了,如果这时候不想被各种i

css常用代码大全以及css兼容(转载)

css常见的快捷开发代码汇总(长期更新),包括CSS3代码,有一些css效果很顽固,经常会一时找不出解决方案,网络上也有很多的工具和高手提供了具体的浏览器兼容代码,这个页面我今后会经常整理,希望能够帮到重构和正在找这些效果的代码,如果你有更好的实现方案,不妨告诉我,或者你有解决不了的,也不妨告诉我.你想找浏览器兼容写法吗?点CSS浏览器兼容与hack代码(经验汇总,保持最新) Css背景颜色透明(#ddd) 请参考在线版制作 .liter{ filter:progid:DXImageTransf

css常用代码大全

css常见的快捷开发代码汇总(长期更新),包括CSS3代码,有一些css效果很顽固,经常会一时找不出解决方案,网络上也有很多的工具和高手提供了具体的浏览器兼容代码,这个页面我今后会经常整理,希望能够帮到重构和正在找这些效果的代码,如果你有更好的实现方案,不妨告诉我,或者你有解决不了的,也不妨告诉我.你想找浏览器兼容写法吗?点CSS浏览器兼容与hack代码(经验汇总,保持最新) Css背景颜色透明(#ddd) 请参考在线版制作 .liter{ filter:progid:DXImageTransf

微信小程序-自定义底部导航

代码地址如下:http://www.demodashi.com/demo/14258.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 1.基本需求. 实现用户自定义底部导航 2.案例目录结构 二.程序实现具体步骤 1.自定义nav.wxml代码 <template name="nav"> <view class=&quo