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

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，您可以删除正文末尾的那个。

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

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

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

What's wrong with my javascript mousewheel animation code?

html

javascript

animation

mousewheel

flexslider