jquery - Nivo Slide 使用 DIV 而不是 IMG

Question

我发现 Nivo Slider 是我网站的最佳解决方案。但是，我希望它将 DIV 制作成幻灯片，而不是像默认情况下那样制作 IMG。我试图将 JS 文件中的所有 IMG 更改为 DIV，但当然没有任何运气......

谁能帮帮我？？

/*
 * jQuery Nivo Slider v2.0
 * http://nivo.dev7studios.com
 *
 * Copyright 2010, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * May 2010 - Pick random effect from specified set of effects by toronegro
 * May 2010 - controlNavThumbsFromRel option added by nerd-sh
 * May 2010 - Do not start nivoRun timer if there is only 1 slide by msielski
 * April 2010 - controlNavThumbs option added by Jamie Thompson (http://jamiethompson.co.uk)
 * March 2010 - manualAdvance option added by HelloPablo (http://hellopablo.co.uk)
 */

(function($) {

    $.fn.nivoSlider = function(options) {

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

        return this.each(function() {
            //Useful variables. Play carefully.
            var vars = {
                currentSlide: 0,
                currentImage: '',
                totalSlides: 0,
                randAnim: '',
                running: false,
                paused: false,
                stop:false
            };

            //Get this slider
            var slider = $(this);
            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');

            //Add initial slices
            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' })
                    );
                } else {
                    slider.append(
                        $('<div class="nivo-slice"></div>').css({ left:(sliceWidth*i)+'px', width:sliceWidth+'px' })
                    );
                }
            }

            //Create caption
            slider.append(
                $('<div class="nivo-caption"><p></p></div>').css({ display:'none', opacity:settings.captionOpacity })
            );          
            //Process initial  caption
            if(vars.currentImage.attr('title') != ''){
                $('.nivo-caption p', slider).html(vars.currentImage.attr('title'));                 
                $('.nivo-caption', slider).fadeIn(settings.animSpeed);
            }

            //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">Prev</a><a class="nivo-nextNav">Next</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') + '" 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 +'</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);
            });
        });

        function nivoRun(slider, kids, settings, nudge){
            //Get our vars
            var vars = slider.data('nivo:vars');
            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++;
            if(vars.currentSlide == vars.totalSlides){ 
                vars.currentSlide = 0;
                //Trigger the slideshowEnd callback
                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 acitve links
            if(settings.controlNav){
                $('.nivo-controlNav a', slider).removeClass('active');
                $('.nivo-controlNav a:eq('+ vars.currentSlide +')', slider).addClass('active');
            }

            //Process caption
            if(vars.currentImage.attr('title') != ''){
                if($('.nivo-caption', slider).css('display') == 'block'){
                    $('.nivo-caption p', slider).fadeOut(settings.animSpeed, function(){
                        $(this).html(vars.currentImage.attr('title'));
                        $(this).fadeIn(settings.animSpeed);
                    });
                } else {
                    $('.nivo-caption p', slider).html(vars.currentImage.attr('title'));
                }                   
                $('.nivo-caption', slider).fadeIn(settings.animSpeed);
            } else {
                $('.nivo-caption', slider).fadeOut(settings.animSpeed);
            }

            //Set new slice backgrounds
            var  i = 0;
            $('.nivo-slice', slider).each(function(){
                var sliceWidth = Math.round(slider.width()/settings.slices);
                $(this).css({ height:'0px', opacity:'0', 
                    background: 'url('+ vars.currentImage.attr('src') +') no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%' });
                i++;
            });

            if(settings.effect == 'random'){
                var anims = new Array("sliceDownRight","sliceDownLeft","sliceUpRight","sliceUpLeft","sliceUpDown","sliceUpDownLeft","fold","fade");
                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 = $.trim(anims[Math.floor(Math.random()*anims.length)]);
            }

            //Run effects
            vars.running = true;
            if(settings.effect == 'sliceDown' || settings.effect == 'sliceDownRight' || vars.randAnim == 'sliceDownRight' ||
                settings.effect == 'sliceDownLeft' || vars.randAnim == 'sliceDownLeft'){
                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'){
                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'){
                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'){
                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'){
                var i = 0;
                $('.nivo-slice', slider).each(function(){
                    $(this).css('height','100%');
                    if(i == settings.slices-1){
                        $(this).animate({ opacity:'1.0' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); });
                    } else {
                        $(this).animate({ opacity:'1.0' }, (settings.animSpeed*2));
                    }
                    i++;
                });
            }
        }
    };

    //Default settings
    $.fn.nivoSlider.defaults = {
        effect:'random',
        slices:15,
        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,
        beforeChange: function(){},
        afterChange: function(){},
        slideshowEnd: function(){}
    };

    $.fn.reverse = [].reverse;

})(jQuery);

非常感谢您! :-))

Answer 1

编辑:切片效果不能应用于图像以外的任何元素，因为脚本会生成切片 (div)，并将图像作为背景图像。背景图像根据切片的位置定位，然后切片 (div) 自上而下、自下而上或其他任何方式移动。同样，不能用除 img 以外的任何元素来完成，因为您不能将一个 div 的内容设置为另一个 div 的背景。 (好吧，我想这可以用 css 3 和 html 5 来完成 - 但等待它:-))

您可以做一些事情。深入研究 javascript 并根据您的意愿更改 nivo 或编写您自己的插件。查看tutorial here .由于这可能需要大量工作，而且您可能不想重新发明轮子，因此我建议您使用一个对自定义有更好支持的插件。要了解可能的自定义插件级别，您应该始终查看默认值。通常 - “默认值”越多(== 可用选项)越好。有成千上万篇关于 jquery 内容 slider 插件的博文(是的，您搜索的是内容 slider ，而不是图像 slider ;-))。所以在谷歌上试试你的运气或查看以下内容:

• bxSlider非常好(而且看起来像你原来的那个通缉。
• coda slider .
• 其中之一 30 best ...博文。

希望这对您有所帮助。