Javascriptのスライドショーサイクル罰金二回、バグ出し

Question

私は、簡単なJavaScriptのスライドショーを作成するためのチュートリアルを追ったが、私は奇妙なバグを持っています...最初の2サイクルは完璧に動作しますが、カウンタはリセット後にスライドショーが前回を示す始まりますすばやくスライドして、正しいスライドをフェードインしようとします。これを引き起こす原因は何ですか？

私は3枚の（Image1.png名付け、Image2.png、およびImage3.png）の画像フォルダ内の私のシンプルなスライドショーのと、このように設定3つのdiv持っている：私のJavaScriptを有効にして

var nextImage; 
var imagesInShow; 
var currentImage; 
var currentSrc 
var nextSrc 

function changeImage() { 
    imagesInShow = "3"; 
    currentImage = $("#counter").html(); 
    currentImage = parseInt(currentImage); 


    if (currentImage == imagesInShow) { 
     nextImage = 1; 
    } 
    else { 
     nextImage = currentImage + 1; 
    } 

    currentSrc = $(".infront img").attr("src"); 
    nextSrc = "SlideShow/image" + nextImage + ".png"; 

    $(".behind img").attr("src", currentSrc); 

    $(".infront").css("display", "none"); 

    $(".infront img").attr("src", nextSrc); 

    $(".infront").fadeIn(1000); 

    $("#counter").html(nextImage); 

    setTimeout('changeImage()', 5000); 


} 

$(document).ready(function() { 
    changeImage(); 
}); 

のように見えます

<div id="SlideshowFeature"> 
     <div id="counter"> 
      3 
     </div> 
     <div class="behind"> 
      <img src="SlideShow/image1.png" alt="IMAGE" /> 
     </div> 
     <div class="infront"> 
      <img src="SlideShow/image1.png" alt="IMAGE" /> 
     </div> 
    </div> 

を

編集：

また、私のCSS

#SlideshowFeature 
{ 
text-align:center; 
margin: 0 auto; 
width:800px; 
background: #02183B; 
height:300px; 
float: left; 
overflow:hidden; 
display:inline; 

} 

#SlideshowFeature div 
{ 
    width: 800px; 
    height:300px; 
    position:absolute; 
} 

#counter 
{ 
    display:none; 
} 

Answer 1

問題は（とないあなたのJSで）あなたのHTML構造であるように見える：

... 
<img src="SlideShow/image1.png" alt="IMAGE" /> 
... 
<img src="SlideShow/image1.png" alt="IMAGE" /> 
... 

私はあなたがimage1.pngを入れて、その後image2.png

Answer 2

.infrontが前にでなければならない意味だと思います.behindは後ろにする必要があります

.behind { 
     z-index: 1; 
    } 
    .infront { 
     z-index: 255; 
    } 

また、私はfadeInコールバックにロジックを再配置しました。

$(".infront").fadeIn(1000, function(){setTimeout('changeImage()', 2500)}); 

$("#counter").html(nextImage); 

//setTimeout('changeImage()', 2500); 

今のところよく見えます。