私のコードはChromeでは動作しませんが、JSFiddleでうまく動作します

Question

問題があります。私は良いカルテルオンラインのコードを見つけた。私はそれを新しいhtml、css、jsファイルにコピーしようとしましたが、そのファイルを開くために、JSFiddleとCodepinでうまく動作しても、カルーセルはChromeでは動作しません。

これは、コードは（$（文書）.keydown（関数（E）{ある）キャッチされないにReferenceErrorであることを述べている：。$が定義されていない

事前にご協力いただきありがとうござい

function moveToSelected(element) { 
 

 
    if (element == "next") { 
 
    var selected = $(".selected").next(); 
 
    } else if (element == "prev") { 
 
    var selected = $(".selected").prev(); 
 
    } else { 
 
    var selected = element; 
 
    } 
 

 
    var next = $(selected).next(); 
 
    var prev = $(selected).prev(); 
 
    var prevSecond = $(prev).prev(); 
 
    var nextSecond = $(next).next(); 
 

 
    $(selected).removeClass().addClass("selected"); 
 

 
    $(prev).removeClass().addClass("prev"); 
 
    $(next).removeClass().addClass("next"); 
 

 
    $(nextSecond).removeClass().addClass("nextRightSecond"); 
 
    $(prevSecond).removeClass().addClass("prevLeftSecond"); 
 

 
    $(nextSecond).nextAll().removeClass().addClass('hideRight'); 
 
    $(prevSecond).prevAll().removeClass().addClass('hideLeft'); 
 

 
} 
 

 
// Eventos teclado 
 
$(document).keydown(function(e) { 
 
    switch(e.which) { 
 
     case 37: // left 
 
     moveToSelected('prev'); 
 
     break; 
 

 
     case 39: // right 
 
     moveToSelected('next'); 
 
     break; 
 

 
     default: return; 
 
    } 
 
    e.preventDefault(); 
 
}); 
 

 
$('#carousel div').click(function() { 
 
    moveToSelected($(this)); 
 
}); 
 

 
$('#prev').click(function() { 
 
    moveToSelected('prev'); 
 
}); 
 

 
$('#next').click(function() { 
 
    moveToSelected('next'); 
 
});

html, body, main { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#carousel { 
 
    position: relative; 
 
    height: 400px; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    overflow: hidden; 
 
} 
 
#carousel div { 
 
    position: absolute; 
 
    transition: transform 1s, left 1s, opacity 1s, z-index 0s; 
 
    opacity: 1; 
 
} 
 
#carousel div img { 
 
    width: 400px; 
 
    transition: width 1s; 
 
} 
 
#carousel div.hideLeft { 
 
    left: 0%; 
 
    opacity: 0; 
 
    transform: translateY(50%) translateX(-50%); 
 
} 
 
#carousel div.hideLeft img { 
 
    width: 200px; 
 
} 
 
#carousel div.hideRight { 
 
    left: 100%; 
 
    opacity: 0; 
 
    transform: translateY(50%) translateX(-50%); 
 
} 
 
#carousel div.hideRight img { 
 
    width: 200px; 
 
} 
 
#carousel div.prev { 
 
    z-index: 5; 
 
    left: 30%; 
 
    transform: translateY(50px) translateX(-50%); 
 
} 
 
#carousel div.prev img { 
 
    width: 300px; 
 
} 
 
#carousel div.prevLeftSecond { 
 
    z-index: 4; 
 
    left: 15%; 
 
    transform: translateY(50%) translateX(-50%); 
 
    opacity: 0.7; 
 
} 
 
#carousel div.prevLeftSecond img { 
 
    width: 200px; 
 
} 
 
#carousel div.selected { 
 
    z-index: 10; 
 
    left: 50%; 
 
    transform: translateY(0px) translateX(-50%); 
 
} 
 
#carousel div.next { 
 
    z-index: 5; 
 
    left: 70%; 
 
    transform: translateY(50px) translateX(-50%); 
 
} 
 
#carousel div.next img { 
 
    width: 300px; 
 
} 
 
#carousel div.nextRightSecond { 
 
    z-index: 4; 
 
    left: 85%; 
 
    transform: translateY(50%) translateX(-50%); 
 
    opacity: 0.7; 
 
} 
 
#carousel div.nextRightSecond img { 
 
    width: 200px; 
 
} 
 

 
.buttons { 
 
    position: fixed; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    bottom: 10px; 
 
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<main> 
 
<link rel="stylesheet" href="Carousel.css"> 
 
<script src="Carousel.js"></script> 
 

 
    <div id="carousel"> 
 

 
     <div class="hideLeft"> 
 
     <img src="https://s16.postimg.org/vklrwoxtx/cover9.jpg"> 
 
     </div> 
 

 
     <div class="prevLeftSecond"> 
 
     <img src="https://s16.postimg.org/cgsggckzp/cover8.jpg"> 
 
     </div> 
 

 
     <div class="prev"> 
 
     <img src="https://s16.postimg.org/emmrauog5/cover7.jpg"> 
 
     </div> 
 

 
     <div class="selected"> 
 
     <img src="https://s16.postimg.org/9drqcz611/cover1.jpg"> 
 
     </div> 
 

 
     <div class="next"> 
 
     <img src="https://s16.postimg.org/pnhwfvgp1/cover6.jpg"> 
 
     </div> 
 

 
     <div class="nextRightSecond"> 
 
     <img src=" 
 
https://s16.postimg.org/edp6kxbnp/cover4.jpg"> 
 
     </div> 
 

 
     <div class="hideRight"> 
 
     <img src="https://s16.postimg.org/fij8qay4l/cover3.jpg"> 
 
     </div> 
 

 
    </div> 
 

 
    <div class="buttons"> 
 
     <button id="prev">Prev</button> 
 
     <button id="next">Next</button> 
 
    </div> 
 

 
    </main>

！

Answer 1

あなたのJSを実行する前document readyイベントを待つ必要があります。

$(document).ready(function() { 
//your code here 
});