-4

jquery 滑块出现问题,似乎我无法正确处理。

当我在我的电脑上编辑它时,滑块显示正确,但是当我上传网站时它显示完全错误。

我在 CSS 中尝试了不同的东西。但是我完全被卡住了,网站看起来都错了。

请看看这个

/* Header Scroll */

.nivoSlider { position:relative;}
.nivoSlider img { position:absolute; top:0px; left:0px;}
.nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:60; display:none;}
.nivo-slice { display:block; position:absolute; z-index:50; height:100%; }
.nivo-caption { position:absolute; left:0px; bottom:0px;  color:#000; width:100%; z-index:89; padding-left: 10px; font-weight: bold}
.nivo-caption p { padding:10px 5px; margin:0;}
.nivo-directionNav a {position:absolute; width:45px; height: 60px; top:45%; z-index:99; cursor:pointer; text-indent:-9999%;}
.nivo-prevNav { background-position: left bottom; left:20px; background:url(images/top_left.png) no-repeat;}
.nivo-nextNav { background-position: left top; right: 0px; background:url(images/top_right.png) no-repeat;}
.nivo-controlNav { bottom:-20px; position:absolute; right:0;}
.nivo-controlNav a { float:left; width:14px; height:14px; display:block; position:relative; z-index:99; cursor:pointer; text-indent:-9999%; background:url(images/scroll_small.png) no-repeat scroll right top;}
.nivo-controlNav a.active { background-position:left top; margin-top:-1px;}
4

1 回答 1

1

http://northwind.cwahi.net/lib/jquery.custom.js 编码是一团糟。尝试使用不同的文件传输类型重新上传。

代码

//nivoSlider call ----------------------------------------------------
jQuery(document).ready(function() {
    jQuery('.waveshow').nivoSlider({
        effect:'sliceDown',
        slices:15,
        animSpeed:1000,
        pauseTime:5000,
        directionNav:true, //Next & Prev
        directionNavHide:true, //Only show on hover
        controlNav:false, //1,2,3...
        keyboardNav:true, //Use left & right arrows
        pauseOnHover:true, //Stop animation while hovering
        manualAdvance:false, //Force manual transitions
        captionOpacity:0.8, //Universal caption opacity
        beforeChange: function(){},
        afterChange: function(){},
        slideshowEnd: function(){} //Triggers after all slides have been shown
    });
});



//Wave slider function -------------------------------------------------------------

(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.width('1px');
            slider.height('1px');
            slider.addClass('nivoSlider');

            //Find our slider children
            var kids = slider.children();
            kids.each(function() {
                var child = $(this);
                if(!child.is('img')){
                    if(child.is('a')){
                        child.addClass('nivo-imageLink');
                    }
                    child = child.find('img:first');
                }
                //Don't ask
                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);
                }
                child.css('display','none');
                vars.totalSlides++;
            });

            //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){
                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++){
                    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);
            });
        });

        function nivoRun(slider, kids, settings, nudge){
            //Get our vars
            var vars = slider.data('nivo:vars');
            if(vars.stop) 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 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,
        directionNav:true,
        directionNavHide:true,
        controlNav:true,
        keyboardNav:true,
        pauseOnHover:true,
        manualAdvance:false,
        captionOpacity:0.8,
        beforeChange: function(){},
        afterChange: function(){},
        slideshowEnd: function(){}
    };

    $.fn.reverse = [].reverse;

})(jQuery);
于 2012-12-29T17:19:51.520 回答