我的javascript mousewheel動畫代碼有什麼問題？

我試圖使網站是這樣的：http://www.nominet.uk/我的javascript mousewheel動畫代碼有什麼問題？

我發現的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包括錯誤。你怎麼看？

來源

2015-10-15 Dave_c

是否有任何錯誤彈出控制檯上？無論如何，你只是在代碼之前和結束時包含jquery兩次。 – fuyushimoya

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)

這部分也應<head>之前，你需要的時候它在頁面準備訪問它投入domready中，爲#slider不會被渲染。在你的鏈接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>

來源

2015-10-15 07:32:19 fuyushimoya

非常感謝。現在正在工作。 –

不客氣:) – fuyushimoya

我的javascript mousewheel動畫代碼有什麼問題？

回答

相關問題