问Jquery Coda Slider帮助
EN

Stack Overflow用户

提问于 2010-01-15 00:33:19

回答 1查看 445关注 0票数 0

请帮我写代码，

<!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>

在我的顶部导航(主页、产品、博客和联系人)。我不想在滚动中包含“博客”按钮。我找不到我的代码出了什么问题，我已经删除了“博客”中的任何锚点链接，但它仍然滚动到最后一页。

请帮帮我，谢谢！

javascript

jquery

回答 1

Stack Overflow用户

发布于 2010-01-15 00:38:29

如果没有设置href属性，博客链接将指向当前页面。你到底想做什么？如果您希望博客链接将您定向到一个完全独立的页面，可以像往常一样将该页面的url放到href属性中。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/2065710

复制

相似问题

问Jquery Coda Slider帮助
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery Coda Slider帮助EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery Coda Slider帮助
EN