jsファイルの最初のセレクタから '$ is undefined'というエラーが表示されます。 JQueryリファレンスをローカルファイルまたはGoogle CDNとして追加しました。また、私はそれをHTMLファイルの先頭と末尾に入れようとしました.JQueryが正しくロードされているかどうかを確認するために、コンソールのネットワーク部分もチェックしてください。しかし、$を認識しないようです。また、JSファイル全体を$(document).ready(function())に入れようとしました この関数は正しく動作しますが、まだエラーが発生しています。 私はさまざまなブラウザと異なるシステムでそれを試みました。
$(document).ready(function() {
\t var currentIndex = 0;
\t var itemAmt;
\t function cycleItems() {
\t \t var item = $('.imageContainer div').eq(currentIndex);
\t \t $('.imageContainer div').hide();
\t \t item.css('display', 'inline-block');
\t }
\t var autoSlide = setInterval(function() {
\t \t currentIndex += 1;
\t \t if (currentIndex > $('.imageContainer div').length - 1) {
\t \t \t currentIndex = 0;
\t \t }
\t \t cycleItems();
\t }, 3000);
\t $('.next').click(function() {
\t \t clearInterval(autoSlide);
\t \t currentIndex += 1;
\t \t if (currentIndex > $('.imageContainer div').length - 1) {
\t \t \t currentIndex = 0;
\t \t }
\t \t cycleItems();
\t });
\t $('.prev').click(function() {
\t \t clearInterval(autoSlide);
\t \t currentIndex -= 1;
\t \t if (currentIndex < 0) {
\t \t \t currentIndex = $('.imageContainer div').length - 1;
\t \t }
\t \t cycleItems();
\t });
});
.imageContainer {
max-width: 400px;
background-color: black;
margin: 0 auto;
text-align: center;
position: relative;
}
.imageContainer div {
background-color: white;
width: 100%;
display: inline-block;
display: none;
}
.imageContainer img {
width: 100%;
height: auto;
}
.next {
right: 5px;
position: absolute;
}
.prev {
left: 5px;
position: absolute;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link href="HomeStyle.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../HomePage/Slider.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery-1.12.0.min.js"></script>
\t <script type="text/javascript" src="../HomePage/jquery.min.js"></script>
\t <script type="text/javascript" src="../HomePage/jquery-latest.js"></script>
<title>Home!</title>
</head>
<body>
<div id="gallery">
<section class="slider">
<button class="next">Next</button>
<button class="prev">Previous</button>
<div class="imageContainer">
<div style="display: inline-block;">
<img src="http://placeimg.com/400/200/people" />
</div>
<div>
<img src="http://placeimg.com/400/200/animals" />
</div>
<div>
<img src="http://placeimg.com/400/200/people" />
</div>
<div>
<img src="http://placeimg.com/400/200/tech" />
</div>
</div>
</section>
</div>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery-1.12.0.min.js"></script>
\t <script type="text/javascript" src="../HomePage/jquery.min.js"></script>
\t <script type="text/javascript" src="../HomePage/jquery-latest.js"></script>
</body>
</html>
は、どのように私はそれが自由なエラーを作業することができますか?
はエラーなしで動作します –
jQueryを何回含むのですか? 1で十分です;) – A1rPun
あなたは真剣にjQueryを8回追加しようとしていますか? –