0
私は現在、助けを求めることからthis tutorialを使って作業していますが、レンガの壁に立ち向かっています。ページは画像が変わらないので、最初の画像にそのまま残ります。jQueryでスライダーを作成する問題
ビデオは3年以上経過しているので、構文の中で何かが変わっていると思っています。私はクローム開発ツールを使っても何が分かりませんか？
ありがとうございました。ここで
は、ページのHTML、CSS、およびJSです：HTML：
<!DOCTYPE>
<html>
<head>
<title>Slider example.</title>
<link rel="stylesheet" href="../css/slider.css">
</head>
<body>
<div class="wrapper">
<div id="slider">
<img id="1" src="../images/tromso.jpg">
<img id="2" src="../images/fjord.jpg">
<img id="3" src="../images/tromso_aerial.jpg">
<img id="4" src="../images/sognefjord.jpg">
</div>
<a href="#" class="left">Previous</a>
<a href="#" class="right">Next</a>
</div>
<script src="../js/jquery.js"></script>
<script src="../js/slider.js"></script>
</body>
</html>
CSS：
.wrapper {
width: 600px;
margin: 0 auto;
}
#slider {
width: 600px;
height: 400px;
overflow: hidden;
margin: 30px auto;
}
#slider > img {
width: 600px;
height: 600px;
float: left;
display: none;
}
a {
padding: 5px 10px;
background-color: #F0F0F0;
margin-top: 30px;
text-decoration: none;
color: #666;
}
a.left {
float: left;
}
a.right {
float: right;
}
JS：
sliderInt = 1;
sliderNext = 2;
$(document).ready(function(){
$("#slider > img#1").fadeIn(300);
startSlider();
});
function startSlider(){
count = $("#slider > img").length;
loop = setInterval(function(){
if(sliderNext > count){
sliderNext = 1;
sliderInt = 1;
}
$("slider > img").fadeOut(300);
$("#slider > img#" + sliderNext).fadeIn(300);
sliderInt = sliderNext;
sliderNext = sliderNext + 1;
},3000);
}
ありがとう、私はこのような小さなエラーを探すために自分のコードをデバッグすることができることを知っている何らかの方法はありますか？それとも、私はそれを細心の注意を払ってスキャンするべきですか？ – Laurens
ブラウザの開発者コンソールを使用すると、すべてのエラーが記録されます。また、あなたのコードで 'debugger'キーワードを使用して、あなたの開発ツールを開いたままにしておけば、スクリプトがこのキーワードに遭遇したときにデバッグすることができます.. F10を使ってデバッグし、またF11はブロックコードの実行に役立ち、F8は次のデバッグポイントを終了するかスキップする –
ありがとうございます、次回このようなことが発生したときは、デバッガのキーワードを使用して調べます。 – Laurens