2010-01-14 32 views
0

请帮我看看我的代码,jQuery的科达滑块帮助

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Build Slider</title> 

    <style type="text/css"> 

    body { text-align: center; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; } 
    a  { text-decoration: none; } 
    div { position: relative; } 

    #mainwrap { 
     width: 950px; 
     background: #CCC; 
     text-align: left; 
     margin: 0 auto; 
     padding: 10px; 
    } 

    #logo { width: 950px; background: #fff; padding: 10px; left: -10px; } 
    #logo a { color: #6CF;} 
    #topnav { position: absolute; width: 450px; top: 30px; right: -10px; } 
    #topnav ul { list-style: none; margin: 0; padding: 0; } 
    #topnav ul li { float: left; } 
    #topnav ul li a { padding: 5px 10px; display: block; color: #6CF; } 
    #topnav ul li a:hover { background: #CF9; border-bottom: solid 2px #6CF; border-top: solid 2px #6CF; } 

    #mcontent_hold #home, 
    #mcontent_hold #about, 
    #mcontent_hold #product, 
    #mcontent_hold #contact { 
     height: 450px; 
     background: #CFC; 
     width: 950px; 
    } 

    </style> 

    <script src="http://jqueryfordesigners.com/demo/jquery-1.2.6.js" type="text/javascript"></script> 
    <script src="http://jqueryfordesigners.com/demo/jquery.scrollTo-1.3.3.js" type="text/javascript"></script> 
    <script src="http://jqueryfordesigners.com/demo/jquery.localscroll-1.2.5.js" type="text/javascript" charset="utf-8"></script> 
    <script src="http://jqueryfordesigners.com/demo/jquery.serialScroll-1.2.1.js" type="text/javascript" charset="utf-8"></script> 

    <script type="text/javascript" charset="utf-8"> 

    // when the DOM is ready... 
    $(document).ready(function() { 

     var $panels = $('#mainwrap #mcontent_hold > div'); 
     var $container = $('#mainwrap #mcontent_hold'); 

     // if false, we'll float all the panels left and fix the width 
     // of the container 
     var horizontal = true; 

     // float the panels left if we're going horizontal 
     if (horizontal) { 
      $panels.css({ 
       'float' : 'left', 
       'position' : 'relative' // IE fix to ensure overflow is hidden 
      }); 

      // calculate a new width for the container (so it holds all panels) 
      $container.css('width', $panels[0].offsetWidth * $panels.length); 
     } 

     // collect the scroll object, at the same time apply the hidden overflow 
     // to remove the default scrollbars that will appear 
     var $scroll = $('#mcontent').css('overflow', 'hidden'); 

     // apply our left + right buttons 
     $scroll 
      .before('<img class="scrollButtons lefts" src="images/scroll_left.png" />') 
      .after('<img class="scrollButtons rights" src="images/scroll_right.png" />'); 

     // handle nav selection 
     function selectNav() { 
      $(this) 
       .parents('ul:first') 
        .find('a') 
         .removeClass('selected') 
        .end() 
       .end() 
       .addClass('selected'); 
     } 

     $('#top').find('a').click(selectNav); 

     // go find the navigation link that has this target and select the nav 
     function trigger(data) { 
      var el = $('#topnav .nav').find('a[href$="' + data.id + '"]').get(0); 
      selectNav.call(el); 
     } 

     if (window.location.hash) { 
      trigger({ id : window.location.hash.substr(1) }); 
     } else { 
      $('ul.nav a:first').click(); 
     } 

     // offset is used to move to *exactly* the right place, since I'm using 
     // padding on my example, I need to subtract the amount of padding to 
     // the offset. Try removing this to get a good idea of the effect 
     var offset = parseInt((horizontal ? 
      $container.css('paddingTop') : 
      $container.css('paddingLeft')) 
      || 0) * -1; 


     var scrollOptions = { 
      target: $scroll, // the element that has the overflow 

      // can be a selector which will be relative to the target 
      items: $panels, 

      navigation: '.nav a', 

      // selectors are NOT relative to document, i.e. make sure they're unique 
      prev: '', 
      next: '', 

      // allow the scroll effect to run both directions 
      axis: 'xy', 

      onAfter: trigger, // our final callback 

      offset: offset, 

      // duration of the sliding effect 
      duration: 600, 

      // easing - can be used with the easing plugin: 
      // http://gsgd.co.uk/sandbox/jquery/easing/ 
      easing: 'swing' 
     }; 

     // apply serialScroll to the slider - we chose this plugin because it 
     // supports// the indexed next and previous scroll along with hooking 
     // in to our navigation. 
     $('#mainwrap').serialScroll(scrollOptions); 

     // now apply localScroll to hook any other arbitrary links to trigger 
     // the effect 
     $.localScroll(scrollOptions); 

     // finally, if the URL has a hash, move the slider in to position, 
     // setting the duration to 1 because I don't want it to scroll in the 
     // very first page load. We don't always need this, but it ensures 
     // the positioning is absolutely spot on when the pages loads. 
     scrollOptions.duration = 1; 
     $.localScroll.hash(scrollOptions); 

    }); 



    </script> 



</head> 
<body> 

<div id="mainwrap"> 
    <div class="fxwrap"> 
     <div id="mainholder"> 

      <div id="top"> 
       <div id="logo" class="gd"><h1><a class="active" href="#">Logo Here</a></h1></div> 
       <div id="topnav" class="gd"> 
        <ul class="nav"> 
         <li class="page home"><a title="" href="#home">Home</a></li> 
         <li class="page about"><a title="" href="#about">About</a></li> 
         <li class="page about"><a title="" href="#product">Product</a></li> 
         <li class="page journal"><a title="" href="">Blog</a></li> 
         <li class="page contact"><a title="" href="#contact">Contact</a></li> 
        </ul>       
       </div> 
      </div> 

      <div id="mcontent"> 
       <div id="mcontent_hold"> 

        <div id="home">Home Goes Here</div> 
       <div id="about">About Goes Here</div> 
        <div id="product">Product Goes Here</div> 
        <div id="contact">Contact Goes Here</div> 

       </div> 
      </div> 

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula euismod ligula, nec ullamcorper sem commodo egestas. Pellentesque posuere elementum nunc sed pretium. Quisque sed lectus et sem porta dignissim. Aliquam ipsum mi, <a href="#about">vulputate</a> vitae molestie eget, <a href="#">vestibulum</a> sed quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam sed semper nulla. Cras in convallis dui. Donec ornare magna vitae libero egestas vel fermentum purus rhoncus. Phasellus congue, velit et bibendum tincidunt, metus erat sodales dolor, fermentum adipiscing enim ligula id tortor. Vivamus blandit sodales metus, vel ultricies arcu malesuada vel. Vestibulum dui risus, rhoncus et elementum et, scelerisque at neque. In dapibus, libero ac laoreet blandit, velit ligula dignissim massa, et mollis tellus dolor sit amet justo. Donec mauris arcu, gravida vel egestas auctor, porttitor eget mauris. In vel mauris lacus. </p> 

     </div> 
    </div> 
</div> 


</body> 
</html> 

在我顶部导航(首页,产品,博客,&联系)。我不想在滚动中包含“博客”按钮。我无法弄清楚我的代码有什么问题,我已经删除了'Blog'中的任何锚链接,但它仍然保持滚动到最后一页。

请帮助我,谢谢!

回答

0

如果没有设置href属性,博客链接将导致当前页面。你到底想要做什么?如果您希望博客链接将您引导至完全独立的页面,请将该页面的url像通常那样放到href属性中。