Question

我尝试制作这样的网站：http://www.nominet.uk/

我在jsfiddle中找到了一个看起来很适合我的代码：http://jsfiddle.net/mark_s/6ssRA/1/

但是如果我自己制作代码并只创建一个像这样的html文件：

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            * {margin:0; padding:0;}
            body { overflow:hidden;}
        </style>
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript">
            var winH = $(window).height(),
            $root = $('body, html');

            $('#slider > div').height(winH)

            $(document).ready(function(){
                $(window).on('mousewheel DOMMouseScroll', function(e){
                    e.preventDefault();

                    var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;
                    //get the current active slide
                    var $active = $('#slider > .active');

                    if(delta < 0) { 
                        //mousewheel down
                        var $next = $active.next();
                        //check if there's a next slide available
                        if($next.length){
                            //animate scrolling to the next slide offset top
                           $root.stop(true).animate({scrollTop:$next.offset().top},'slow');
                           //move also the indicator class 'active'
                                           $next.addClass('active').siblings().removeClass('active');
                        }

                    }else{
                        //mousewheel up
                        var $prev = $active.prev();
                        if($prev.length){
                             //animate scrolling to the previous slide offset top
                            $root.stop(true).animate({scrollTop:$prev.offset().top},'slow'); 
                            $prev.addClass('active').siblings().removeClass('active');
                        }
                    }

                });

            });
        </script>
    </head>
    <body>
        <div id="slider">
            <div id="slide1" class="active">slide 1</div>
            <div id="slide2">slide 2</div>
            <div id="slide3">slide 3</div>
        </div>
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    </body>
</html>

代码不起作用。我认为.js包括错误。你觉得怎么样？

Answer 1

    var winH = $(window).height(),
    $root = $('body, html');

    // VVVV as you use a selector to find #slider, you should ensure that slider is accessible.
    $('#slider > div').height(winH)

这些部分也应该放入domready，因为#slider在<head>之前不会呈现，您需要在页面准备就绪时访问它。在链接的jsfiddle中，编写器只是将加载设置更改为ondomready，因此这些行实际上包含在另一个domready回调中。

另外，你不需要两次包含jquery，你可以删除身体末端的那个。

＆＃13;

* {margin:0; padding:0;}
body { overflow:hidden;}

＆＃13;

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            * {margin:0; padding:0;}
            body { overflow:hidden;}
        </style>
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
              
              var winH = $(window).height(),
              $root = $('body, html');
              
              // As you put the scripts in head. The slider in body is not render at this time, so you
              // need to put this into domready's callback.
              $('#slider > div').height(winH)
              
                $(window).on('mousewheel DOMMouseScroll', function(e){
                    e.preventDefault();

                    var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;
                    //get the current active slide
                    var $active = $('#slider > .active');

                    if(delta < 0) { 
                        //mousewheel down
                        var $next = $active.next();
                        //check if there's a next slide available
                        if($next.length){
                            //animate scrolling to the next slide offset top
                           $root.stop(true).animate({scrollTop:$next.offset().top},'slow');
                           //move also the indicator class 'active'
                                           $next.addClass('active').siblings().removeClass('active');
                        }

                    }else{
                        //mousewheel up
                        var $prev = $active.prev();
                        if($prev.length){
                             //animate scrolling to the previous slide offset top
                            $root.stop(true).animate({scrollTop:$prev.offset().top},'slow'); 
                            $prev.addClass('active').siblings().removeClass('active');
                        }
                    }

                });

            });
        </script>
    </head>
    <body>
        <div id="slider">
            <div id="slide1" class="active">slide 1</div>
            <div id="slide2">slide 2</div>
            <div id="slide3">slide 3</div>
        </div>
    </body>
</html>

＆＃13;

我的javascript鼠标滚轮动画代码出了什么问题？

1 个答案: