单页上的2个jQuery插件的IE错误..请帮忙!

时间:2010-09-13 08:42:46

标签: jquery

我正在尝试在单页上使用Nivo的横幅滑块插件(http://nivo.dev7studios.com/)和Kwick的插件来滑动门导航栏菜单(http://www.kriesi.at/wp-content/extra_data/kwicks_tutorial/kwicks_final.html)。但是,一切似乎在Firefox和Chrome中都很完美,但是IE会抛出错误。 我是jQuery的新手。我也试过使用noconflict()方法,但我想我不是在做礼。 请看一下。

HTML文件代码:

        <html>
            <head>
                <style type='text/css'>


        #slider {
            position:relative;
            //See the "style-pack" below for image
            background:url(images/loading.gif) no-repeat 50% 50%;
        }
        #slider img {
            position:absolute;
            top:0px;
            left:0px;
            display:none;
        }

        </style>
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
        <script type='text/javascript' src='kwicks.js'></script>
        <script type='text/javascript' src='custom.js'></script>
        <!-- Slider Code -->
        <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
        <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
        <script type="text/javascript">
                $(window).load(function() {
                $('#slider').nivoSlider({
                effect:'random', //Specify sets like: 'fold,fade,sliceDown'
                slices:15,
                animSpeed:500, //Slide transition speed
                pauseTime:3000,
                startSlide:0, //Set starting Slide (0 index)
                directionNav:true, //Next & Prev
                directionNavHide:true, //Only show on hover
                controlNav:true, //1,2,3...
                controlNavThumbs:false, //Use thumbnails for Control Nav
              controlNavThumbsFromRel:false, //Use image rel for thumbs
                controlNavThumbsSearch: '.jpg', //Replace this with...
                controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
                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
            });
        });
        </script>
        <!-- Slider Code end-->
            </head>
        <body>

        <center>
        <div id="slider">
            <img src="images/walle.jpg" alt="" />
            <img src="images/monstersinc.jpg" alt="" />
            <img src="images/nemo.jpg" alt="" />
            <img src="images/up.jpg" alt="" />
        </div>
        </center>
        <br><br>
        <center>
        <div class="navigation_menu" align="center">
                <ul class="kwicks">
             <li id="kwick1"><a href="#">Home</a></li>
             <li id="kwick2"><a href="#">Contact</a></li>
             <li id="kwick3"><a href="#">Downloads</a></li>
             <li id="kwick4"><a href="#">Search</a></li>
         </ul>
                </div></center>


        </center>
        </body>

        </html>

Kwicks.js文件代码:

                (function($){
                    $.fn.kwicks = function(options) {
                        var defaults = {
                            isVertical: false,
                            sticky: false,
                            defaultKwick: 0,
                            event: 'mouseover',
                            spacing: 0,
                            duration: 500
                        };
                        var o = $.extend(defaults, options);
                        var WoH = (o.isVertical ? 'height' : 'width'); // WoH = Width or Height
                        var LoT = (o.isVertical ? 'top' : 'left'); // LoT = Left or Top

                        return this.each(function() {
                            container = $(this);
                            var kwicks = container.children('li');
                            var normWoH = kwicks.eq(0).css(WoH).replace(/px/,''); // normWoH = Normal Width or Height
                            if(!o.max) {
                                o.max = (normWoH * kwicks.size()) - (o.min * (kwicks.size() - 1));
                            } else {
                                o.min = ((normWoH * kwicks.size()) - o.max) / (kwicks.size() - 1);
                            }
                            // set width of container ul
                            if(o.isVertical) {
                                container.css({
                                    width : kwicks.eq(0).css('width'),
                                    height : (normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px'
                                });             
                            } else {
                                container.css({
                                    width : (normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px',
                                    height : kwicks.eq(0).css('height')
                                });             
                            }

                            // pre calculate left or top values for all kwicks but the first and last
                            // i = index of currently hovered kwick, j = index of kwick we're calculating
                            var preCalcLoTs = []; // preCalcLoTs = pre-calculated Left or Top's
                            for(i = 0; i < kwicks.size(); i++) {
                                preCalcLoTs[i] = [];
                                // don't need to calculate values for first or last kwick
                                for(j = 1; j < kwicks.size() - 1; j++) {
                                    if(i == j) {
                                        preCalcLoTs[i][j] = o.isVertical ? j * o.min + (j * o.spacing) : j * o.min + (j * o.spacing);
                                    } else {
                                        preCalcLoTs[i][j] = (j <= i ? (j * o.min) : (j-1) * o.min + o.max) + (j * o.spacing);
                                    }
                                }
                            }

                            // loop through all kwick elements
                            kwicks.each(function(i) {
                                var kwick = $(this);
                                // set initial width or height and left or top values
                                // set first kwick
                                if(i === 0) {
                                    kwick.css(LoT, '0px');
                                } 
                                // set last kwick
                                else if(i == kwicks.size() - 1) {
                                    kwick.css(o.isVertical ? 'bottom' : 'right', '0px');
                                }
                                // set all other kwicks
                                else {
                                    if(o.sticky) {
                                        kwick.css(LoT, preCalcLoTs[o.defaultKwick][i]);
                                    } else {
                                        kwick.css(LoT, (i * normWoH) + (i * o.spacing));
                                    }
                                }
                                // correct size in sticky mode
                                if(o.sticky) {
                                    if(o.defaultKwick == i) {
                                        kwick.css(WoH, o.max + 'px');
                                        kwick.addClass('active');
                                    } else {
                                        kwick.css(WoH, o.min + 'px');
                                    }
                                }
                                kwick.css({
                                    margin: 0,
                                    position: 'absolute'
                                });

                                kwick.bind(o.event, function() {
                                    // calculate previous width or heights and left or top values
                                    var prevWoHs = []; // prevWoHs = previous Widths or Heights
                                    var prevLoTs = []; // prevLoTs = previous Left or Tops
                                    kwicks.stop().removeClass('active');
                                    for(j = 0; j < kwicks.size(); j++) {
                                        prevWoHs[j] = kwicks.eq(j).css(WoH).replace(/px/, '');
                                        prevLoTs[j] = kwicks.eq(j).css(LoT).replace(/px/, '');
                                    }
                                    var aniObj = {};
                                    aniObj[WoH] = o.max;
                                    var maxDif = o.max - prevWoHs[i];
                                    var prevWoHsMaxDifRatio = prevWoHs[i]/maxDif;
                                    kwick.addClass('active').animate(aniObj, {
                                        step: function(now) {
                                            // calculate animation completeness as percentage
                                            var percentage = maxDif != 0 ? now/maxDif - prevWoHsMaxDifRatio : 1;
                                            // adjsut other elements based on percentage
                                            kwicks.each(function(j) {
                                                if(j != i) {
                                                    kwicks.eq(j).css(WoH, prevWoHs[j] - ((prevWoHs[j] - o.min) * percentage) + 'px');
                                                }
                                                if(j > 0 && j < kwicks.size() - 1) { // if not the first or last kwick
                                                    kwicks.eq(j).css(LoT, prevLoTs[j] - ((prevLoTs[j] - preCalcLoTs[i][j]) * percentage) + 'px');
                                                }
                                            });
                                        },
                                        duration: o.duration,
                                        easing: o.easing
                                    });
                                });
                            });
                            if(!o.sticky) {
                                container.bind("mouseleave", function() {
                                    var prevWoHs = [];
                                    var prevLoTs = [];
                                    kwicks.removeClass('active').stop();
                                    for(i = 0; i < kwicks.size(); i++) {
                                        prevWoHs[i] = kwicks.eq(i).css(WoH).replace(/px/, '');
                                        prevLoTs[i] = kwicks.eq(i).css(LoT).replace(/px/, '');
                                    }
                                    var aniObj = {};
                                    aniObj[WoH] = normWoH;
                                    var normDif = normWoH - prevWoHs[0];
                                    kwicks.eq(0).animate(aniObj, {
                                        step: function(now) {
                                            var percentage = normDif != 0 ? (now - prevWoHs[0])/normDif : 1;
                                            for(i = 1; i < kwicks.size(); i++) {
                                                kwicks.eq(i).css(WoH, prevWoHs[i] - ((prevWoHs[i] - normWoH) * percentage) + 'px');
                                                if(i < kwicks.size() - 1) {
                                                    kwicks.eq(i).css(LoT, prevLoTs[i] - ((prevLoTs[i] - ((i * normWoH) + (i * o.spacing))) * percentage) + 'px');
                                                }
                                            }
                                        },
                                        duration: o.duration,
                                        easing: o.easing
                                    });
                                });
                            }
                        });
                    };
                })(jQuery);

jquery.nivo.slider.pack.js文件代码:

            eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(9($){$.1k.1o=9(2b){b 3=$.2g({},$.1k.1o.21,2b);N g.H(9(){b 4={f:0,u:\'\',W:0,r:\'\',L:n,1j:n,1S:n};b 5=$(g);5.1T(\'7:4\',4);5.e(\'2o\',\'2m\');5.1f(\'1o\');b d=5.2n();d.H(9(){b l=$(g);b 1t=\'\';6(!l.J(\'B\')){6(l.J(\'a\')){l.1f(\'7-2h\');1t=l}l=l.1m(\'B:1r\')}b 18=l.x();6(18==0)18=l.t(\'x\');b 1b=l.y();6(1b==0)1b=l.t(\'y\');6(18>5.x()){5.x(18)}6(1b>5.y()){5.y(1b)}6(1t!=\'\'){1t.e(\'P\',\'1q\')}l.e(\'P\',\'1q\');4.W++});6(3.19>0){6(3.19>=4.W)3.19=4.W-1;4.f=3.19}6($(d[4.f]).J(\'B\')){4.u=$(d[4.f])}k{4.u=$(d[4.f]).1m(\'B:1r\')}6($(d[4.f]).J(\'a\')){$(d[4.f]).e(\'P\',\'1A\')}5.e(\'11\',\'10(\'+4.u.t(\'E\')+\') Z-Y\');23(b i=0;i<3.h;i++){b G=U.29(5.x()/3.h);6(i==3.h-1){5.O($(\'<D A="7-c"></D>\').e({2a:(G*i)+\'1c\',x:(5.x()-(G*i))+\'1c\'}))}k{5.O($(\'<D A="7-c"></D>\').e({2a:(G*i)+\'1c\',x:G+\'1c\'}))}}5.O($(\'<D A="7-K"><p></p></D>\').e({P:\'1q\',z:3.1U}));6(4.u.t(\'w\')!=\'\'){b w=4.u.t(\'w\');6(w.24(0,1)==\'#\')w=$(w).1d();$(\'.7-K p\',5).1d(w);$(\'.7-K\',5).1z(3.o)}b m=0;6(!3.1p&&d.1g>1){m=1E(9(){F(5,d,3,n)},3.1u)}6(3.S){5.O(\'<D A="7-S"><a A="7-27">2k</a><a A="7-25">2i</a></D>\');6(3.1R){$(\'.7-S\',5).26();5.1V(9(){$(\'.7-S\',5).2j()},9(){$(\'.7-S\',5).26()})}$(\'a.7-27\',5).1C(\'1F\',9(){6(4.L)N n;T(m);m=\'\';4.f-=2;F(5,d,3,\'1y\')});$(\'a.7-25\',5).1C(\'1F\',9(){6(4.L)N n;T(m);m=\'\';F(5,d,3,\'1x\')})}6(3.M){b 14=$(\'<D A="7-M"></D>\');5.O(14);23(b i=0;i<d.1g;i++){6(3.1P){b l=d.1B(i);6(!l.J(\'B\')){l=l.1m(\'B:1r\')}6(3.1O){14.O(\'<a A="7-1s" 1a="\'+i+\'"><B E="\'+l.t(\'1a\')+\'" 2e="" /></a>\')}k{14.O(\'<a A="7-1s" 1a="\'+i+\'"><B E="\'+l.t(\'E\').2l(3.1M,3.1N)+\'" 2e="" /></a>\')}}k{14.O(\'<a A="7-1s" 1a="\'+i+\'">\'+(i+1)+\'</a>\')}}$(\'.7-M a:1B(\'+4.f+\')\',5).1f(\'1h\');$(\'.7-M a\',5).1C(\'1F\',9(){6(4.L)N n;6($(g).2f(\'1h\'))N n;T(m);m=\'\';5.e(\'11\',\'10(\'+4.u.t(\'E\')+\') Z-Y\');4.f=$(g).t(\'1a\')-1;F(5,d,3,\'1s\')})}6(3.1X){$(2s).2F(9(1D){6(1D.1Q==\'2D\'){6(4.L)N n;T(m);m=\'\';4.f-=2;F(5,d,3,\'1y\')}6(1D.1Q==\'2C\'){6(4.L)N n;T(m);m=\'\';F(5,d,3,\'1x\')}})}6(3.1W){5.1V(9(){4.1j=Q;T(m);m=\'\'},9(){4.1j=n;6(m==\'\'&&!3.1p){m=1E(9(){F(5,d,3,n)},3.1u)}})}5.2E(\'7:X\',9(){4.L=n;$(d).H(9(){6($(g).J(\'a\')){$(g).e(\'P\',\'1q\')}});6($(d[4.f]).J(\'a\')){$(d[4.f]).e(\'P\',\'1A\')}6(m==\'\'&&!4.1j&&!3.1p){m=1E(9(){F(5,d,3,n)},3.1u)}3.20.1w(g)})});9 F(5,d,3,17){b 4=5.1T(\'7:4\');6((!4||4.1S)&&!17)N n;3.1Y.1w(g);6(!17){5.e(\'11\',\'10(\'+4.u.t(\'E\')+\') Z-Y\')}k{6(17==\'1y\'){5.e(\'11\',\'10(\'+4.u.t(\'E\')+\') Z-Y\')}6(17==\'1x\'){5.e(\'11\',\'10(\'+4.u.t(\'E\')+\') Z-Y\')}}4.f++;6(4.f==4.W){4.f=0;3.2d.1w(g)}6(4.f<0)4.f=(4.W-1);6($(d[4.f]).J(\'B\')){4.u=$(d[4.f])}k{4.u=$(d[4.f]).1m(\'B:1r\')}6(3.M){$(\'.7-M a\',5).2B(\'1h\');$(\'.7-M a:1B(\'+4.f+\')\',5).1f(\'1h\')}6(4.u.t(\'w\')!=\'\'){b w=4.u.t(\'w\');6(w.24(0,1)==\'#\')w=$(w).1d();6($(\'.7-K\',5).e(\'P\')==\'1A\'){$(\'.7-K p\',5).2c(3.o,9(){$(g).1d(w);$(g).1z(3.o)})}k{$(\'.7-K p\',5).1d(w)}$(\'.7-K\',5).1z(3.o)}k{$(\'.7-K\',5).2c(3.o)}b i=0;$(\'.7-c\',5).H(9(){b G=U.29(5.x()/3.h);$(g).e({y:\'R\',z:\'0\',11:\'10(\'+4.u.t(\'E\')+\') Z-Y -\'+((G+(i*G))-G)+\'1c 0%\'});i++});6(3.j==\'1l\'){b V=2H 2G("1K","12","1H","1e","1G","13","1I","1v");4.r=V[U.22(U.1l()*(V.1g+1))];6(4.r==2I)4.r=\'1v\'}6(3.j.2p(\',\')!=-1){b V=3.j.2t(\',\');4.r=$.2A(V[U.22(U.1l()*V.1g)])}4.L=Q;6(3.j==\'2r\'||3.j==\'1K\'||4.r==\'1K\'||3.j==\'12\'||4.r==\'12\'){b q=0;b i=0;b h=$(\'.7-c\',5);6(3.j==\'12\'||4.r==\'12\')h=$(\'.7-c\',5).1n();h.H(9(){b c=$(g);c.e(\'1L\',\'R\');6(i==3.h-1){I(9(){c.C({y:\'s%\',z:\'1.0\'},3.o,\'\',9(){5.16(\'7:X\')})},(s+q))}k{I(9(){c.C({y:\'s%\',z:\'1.0\'},3.o)},(s+q))}q+=1i;i++})}k 6(3.j==\'2q\'||3.j==\'1H\'||4.r==\'1H\'||3.j==\'1e\'||4.r==\'1e\'){b q=0;b i=0;b h=$(\'.7-c\',5);6(3.j==\'1e\'||4.r==\'1e\')h=$(\'.7-c\',5).1n();h.H(9(){b c=$(g);c.e(\'28\',\'R\');6(i==3.h-1){I(9(){c.C({y:\'s%\',z:\'1.0\'},3.o,\'\',9(){5.16(\'7:X\')})},(s+q))}k{I(9(){c.C({y:\'s%\',z:\'1.0\'},3.o)},(s+q))}q+=1i;i++})}k 6(3.j==\'1G\'||3.j==\'2u\'||4.r==\'1G\'||3.j==\'13\'||4.r==\'13\'){b q=0;b i=0;b v=0;b h=$(\'.7-c\',5);6(3.j==\'13\'||4.r==\'13\')h=$(\'.7-c\',5).1n();h.H(9(){b c=$(g);6(i==0){c.e(\'1L\',\'R\');i++}k{c.e(\'28\',\'R\');i=0}6(v==3.h-1){I(9(){c.C({y:\'s%\',z:\'1.0\'},3.o,\'\',9(){5.16(\'7:X\')})},(s+q))}k{I(9(){c.C({y:\'s%\',z:\'1.0\'},3.o)},(s+q))}q+=1i;v++})}k 6(3.j==\'1I\'||4.r==\'1I\'){b q=0;b i=0;$(\'.7-c\',5).H(9(){b c=$(g);b 1J=c.x();c.e({1L:\'R\',y:\'s%\',x:\'R\'});6(i==3.h-1){I(9(){c.C({x:1J,z:\'1.0\'},3.o,\'\',9(){5.16(\'7:X\')})},(s+q))}k{I(9(){c.C({x:1J,z:\'1.0\'},3.o)},(s+q))}q+=1i;i++})}k 6(3.j==\'1v\'||4.r==\'1v\'){b i=0;$(\'.7-c\',5).H(9(){$(g).e(\'y\',\'s%\');6(i==3.h-1){$(g).C({z:\'1.0\'},(3.o*2),\'\',9(){5.16(\'7:X\')})}k{$(g).C({z:\'1.0\'},(3.o*2))}i++})}}};$.1k.1o.21={j:\'1l\',h:15,o:2v,1u:2y,19:0,S:Q,1R:Q,M:Q,1P:n,1O:n,1M:\'.1Z\',1N:\'2x.1Z\',1X:Q,1W:Q,1p:n,1U:0.8,1Y:9(){},20:9(){},2d:9(){}};$.1k.1n=[].2w})(2z);',62,169,'|||settings|vars|slider|if|nivo||function||var|slice|kids|css|currentSlide|this|slices||effect|else|child|timer|false|animSpeed||timeBuff|randAnim|100|attr|currentImage||title|width|height|opacity|class|img|animate|div|src|nivoRun|sliceWidth|each|setTimeout|is|caption|running|controlNav|return|append|display|true|0px|directionNav|clearInterval|Math|anims|totalSlides|animFinished|repeat|no|url|background|sliceDownLeft|sliceUpDownLeft|nivoControl||trigger|nudge|childWidth|startSlide|rel|childHeight|px|html|sliceUpLeft|addClass|length|active|50|paused|fn|random|find|_reverse|nivoSlider|manualAdvance|none|first|control|link|pauseTime|fade|call|next|prev|fadeIn|block|eq|live|event|setInterval|click|sliceUpDown|sliceUpRight|fold|origWidth|sliceDownRight|top|controlNavThumbsSearch|controlNavThumbsReplace|controlNavThumbsFromRel|controlNavThumbs|keyCode|directionNavHide|stop|data|captionOpacity|hover|pauseOnHover|keyboardNav|beforeChange|jpg|afterChange|defaults|floor|for|substr|nextNav|hide|prevNav|bottom|round|left|options|fadeOut|slideshowEnd|alt|hasClass|extend|imageLink|Next|show|Prev|replace|relative|children|position|indexOf|sliceUp|sliceDown|window|split|sliceUpDownRight|500|reverse|_thumb|3000|jQuery|trim|removeClass|39|37|bind|keypress|Array|new|undefined'.split('|'),0,{}))

custom.js文件代码:

             function my_kwicks(){
                $('.kwicks').kwicks({
                    duration: 300,   
                    max: 200,  
                    spacing:  0  
                });
            }  

             $(document).ready(function(){                  
                my_kwicks();
            });

nivo-slider.css文件代码:

            .nivoSlider {
                position:relative;
            }
            .nivoSlider img {
                position:absolute;
                top:0px;
                left:0px;
            }
            /* If an image is wrapped in a link */
            .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;
            }
            /* The slices in the Slider */
            .nivo-slice {
                display:block;
                position:absolute;
                z-index:50;
                height:100%;
            }
            /* Caption styles */
            .nivo-caption {
                position:absolute;
                left:0px;
                bottom:0px;
                background:#000;
                color:#fff;
                opacity:0.8; /* Overridden by captionOpacity setting */
                width:70%;
                z-index:89;
            }
            .nivo-caption p {
                padding:5px;
                margin:0;
            }
            .nivo-caption a {
                display:inline !important;
            }
            .nivo-html-caption {
                display:none;
            }
            /* Direction nav styles (e.g. Next & Prev) */
            .nivo-directionNav a {
                position:absolute;
                top:45%;
                z-index:99;
                cursor:pointer;
            }
            .nivo-prevNav {
                left:0px;
            }
            .nivo-nextNav {
                //right:0px;
                left:908px;
            }
            /* Control nav styles (e.g. 1,2,3...) */
            .nivo-controlNav a {
                position:relative;
                z-index:99;
                cursor:pointer;
            }
            .nivo-controlNav a.active {
                font-weight:bold;
            }

style.css文件代码:

            body{
            font-size:0.85em;
            font-family:Verdana, Arial, Helvetica, sans-serif;

            }
             .kwicks {
                 list-style: none;
                 position: relative;
                 margin: 0;
                 padding: 0;
                 background-image:url(no_flicker.jpg); /*some browsers are to slow when aligning the menu items via jQuery and so the background shines through, this prevents this flickering*/

             }
             .kwicks li{
                display: block;
                overflow: hidden;
                padding: 0;
                cursor: pointer;
                float: left;
                width: 125px;
                height: 40px;
                margin-right: 0px;
                background-image:url(kwicks_sprite.jpg);
                background-repeat:no-repeat;
            }
            .kwicks a{
                display:block;
                height:40px;
                text-indent:-9999px;
                outline:none;
            }

            #kwick1 {
                background-position:0px 0px;
            }
            #kwick2 {
                background-position:-200px 0px;
            }
            #kwick3 {
                background-position:-400px 0px;
            }
            #kwick4 {
                background-position:-600px 0px;
            }



            #kwick1.active, #kwick1:hover {
                background-position: 0 bottom;
            }
            #kwick2.active, #kwick2:hover{
                background-position: -200px bottom;
            }
            #kwick3.active, #kwick3:hover {
                background-position: -400px bottom;
            }
            #kwick4.active, #kwick4:hover {
                background-position: -600px bottom;
            }


            #kwick1 a{
                background-image:url(end.jpg);
                background-repeat:no-repeat;
                background-position: left 0px;
            }

            #kwick1 a:hover{
                background-position: left -80px;
            }

            #kwick4 a{
                background-image:url(end.jpg);
                background-repeat:no-repeat;
                background-position: right -40px;
            }
            #kwick4 a:hover{
                background-position: right -120px;
            }

有人请帮助。

1 个答案:

答案 0 :(得分:2)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

该行应位于所有js代码之上......

您可能希望将$('#slider').nivoSlider({ ...... })放在custom.js文件中的ready处理程序中。所以一切都会像这样,

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript' src='kwicks.js'></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type='text/javascript' src='custom.js'></script>

,你的custom.js文件是这样的,

$(document).ready(function () {
    $('.kwicks').kwicks({
        duration: 300,
        max: 200,
        spacing: 0
    });
    $('#slider').nivoSlider({
        effect: 'random',                          //Specify sets like: 'fold,fade,sliceDown'
        slices: 15,
        animSpeed: 500,                            //Slide transition speed
        pauseTime: 3000,
        startSlide: 0,                             //Set starting Slide (0 index)
        directionNav: true,                        //Next & Prev
        directionNavHide: true,                    //Only show on hover
        controlNav: true,                          //1,2,3...
        controlNavThumbs: false,                   //Use thumbnails for Control Nav
        controlNavThumbsFromRel: false,            //Use image rel for thumbs
        controlNavThumbsSearch: '.jpg',            //Replace this with...
        controlNavThumbsReplace: '_thumb.jpg',     //...this in thumb Image src
        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
    });

});

并且为了获得最佳预期结果,您的HTML应该有效。 validate your page here.