jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery – Nivo Slide使用DIV而不是IMG大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我发现Nivo Slider是我网站的最佳解决方案.但是,我希望它使DIVs成为幻灯片,而不是认的IMGs.我已经尝试将所有IMG更改为DIV在JS文件中,但没有任何运气…

任何人都可以帮我吗?

/*
 * 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: '',@R_791_10586@lSlides: 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.@R_791_10586@lSlides++;
            });

            //Set startSlide
            if(setTings.startSlide > 0){
                if(setTings.startSlide >= vars.@R_791_10586@lSlides) setTings.startSlide = vars.@R_791_10586@lSlides - 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,'prev');
                });

                $('a.nivo-nextNav',function(){
                    if(vars.running) return false;
                    clearInterval(timer);
                    timer = '';
                    nivoRun(slider,'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',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,'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,'prev');
                    }
                    //Right
                    if(event.keyCode == '39'){
                        if(vars.running) return false;
                        clearInterval(timer);
                        timer = '';
                        nivoRun(slider,'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,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,setTings.pauseTimE);
                }
                //trigger the afterChange callBACk
                setTings.afterChange.call(this);
            });
        });

        function nivoRun(slider,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.@R_791_10586@lSlides){ 
                vars.currentSlide = 0;
                //trigger the slideshowEnd callBACk
                setTings.slideshowEnd.call(this);
            }
            if(vars.currentSlide < 0) vars.currentSlide = (vars.@R_791_10586@lSlides - 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%',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',(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%',(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,(100 + timeBuff));
                    } else {
                        setTimeout(function(){
                            slice.animate({ width:origWidth,(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);

提前非常感谢! :-))

解决方法

编辑:切片效果不能应用于除图像之外的任何元素,因为脚本会以图像为背景图像生成切片(div).背景图像根据切片的位置定位,然后切片(div)从上往下移动,自下而上或任意移动.再也不能用img以外的任何元素来完成,因为你不能将div的contet设置为另一个div的背景. (嗯,我猜这可以用css 3和html 5 – 但是waaait为它:-))

你可以做一些事情.潜入javascript并根据您的愿望改变nivo或编写自己的插件.看到一个tutorial here.由于这可能是相当多的工作,你可能不想重新发明,我建议你使用一个更好的支持定制的插件.要掌握可能的自定义插件级别,您应该总是看看认值.通常 – ‘defaults'(==可用选项)越多越好.有数以千计的jQuery内容滑块插件博客(是的,你搜索内容滑块,而不是图片滑块;-)).所以请尝试你的运气在谷歌或查看以下内容

> bxSlider是相当不错(和
看起来像你原来的那个
通缉.
> coda slider.
>其中一个30 best
相关博客文章.

希望这可以帮助.

大佬总结

以上是大佬教程为你收集整理的jquery – Nivo Slide使用DIV而不是IMG全部内容,希望文章能够帮你解决jquery – Nivo Slide使用DIV而不是IMG所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。