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

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

javascript html animation

我的javascript鼠标滚轮动画代码有什么问题？,javascript,html,animation,flexslider,mousewheel,Javascript,Html,Animation,Flexslider,Mousewheel,我试着创建这样的网站：我在JSFIDLE中找到了一个似乎非常适合我的代码：但是如果我自己编写代码，只创建一个html文件，如下所示： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="

我试着创建这样的网站：

我在JSFIDLE中找到了一个似乎非常适合我的代码：

但是如果我自己编写代码，只创建一个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的代码是错误的。你觉得怎么样

    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中，因为之前不会呈现滑块，所以您需要在页面中准备好后访问它。在链接的JSFIDLE中，编写器只需将加载设置更改为ondomready，因此这些行实际上被包装在另一个domready回调中

另外，您不需要包含jquery两次，您可以删除正文末尾的jquery

*{边距：0；填充：0；} 正文{溢出：隐藏；} *{边距：0；填充：0；} 正文{溢出：隐藏；} $document.readyfunction{ var winH=$window.height， $root=$'body，html'； //当您将脚本放入头部时。此时主体中的滑块不渲染，因此 //需要把这个放到domready的回调中。 $滑块>div'.heightwinH $window.on'mousewheel DOMMouseScroll'，function e{ e、防止违约； var delta=e.originalEvent.detail<0 | | e.originalEvent.wheeldta>0？1:-1； //获取当前活动幻灯片 var$active=$'slider>.active'； ifdelta<0{ //鼠标滚轮放下 var$next=$active.next； //检查是否有下一张幻灯片如果$next.length{ //设置滚动到下一张幻灯片的动画偏移顶部 $root.stoptrue.animate{scrollTop:$next.offset.top}，'slow'； //同时移动指示器类“活动” $next.addClass'active'。兄弟.removeClass'active'； } }否则{ //鼠标滚轮向上 var$prev=$active.prev；如果$prev.length{ //设置滚动到上一张幻灯片偏移顶部的动画 $root.stoptrue.animate{scrollTop:$prev.offset.top}，'slow'； $prev.addClass'active'。兄弟.removeClass'active'； } } }; }; 幻灯片1 幻灯片2 幻灯片3

控制台上是否弹出任何错误？无论如何，您只包含了两次jquery，在代码之前和正文末尾。