的Javascript幻燈片循環罰款兩次，然後蟲子

我跟着一個教程創建一個簡單的JavaScript幻燈片，但我有一個奇怪的錯誤...第2個週期的工作完美，但一旦計數器復位幻燈片顯示開始之前的快速滑動然後嘗試淡入正確的幻燈片。任何想法是什麼造成這個？的Javascript幻燈片循環罰款兩次，然後蟲子

我有3幅圖像（名爲Image1.png，Image2.png和Image3.png）的文件夾在我的簡單的幻燈片和3個div的設置是這樣的：

<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>

我的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(); 
});

編輯：

也這裏是我的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; 
}

來源

2012-01-22 kmc5117

是正常的，你有你的HTML結構中的兩個'image1.png'？ – ajax333221

一個更具描述性的問題標題會更好。你仍然可以編輯它。 –

腳本對我來說工作正常。請在這裏附上css，看看是否會導致問題並指定瀏覽器版本。 –

的問題似乎是在你的HTML結構（而不是在你的JS）：

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

我想你的意思是把image1.png然後image2.png

來源

2012-01-22 17:11:16 ajax333221

不是這樣。前2個週期工作正常，所以這些IMG資源已被JavaScript更改沒有問題。無論如何，我都測試了您的建議，但仍然存在相同的問題。不過謝謝。 – kmc5117

.infront必須在前面和後面必須在後面

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

而且我還將重新調度邏輯移動到fadeIn回調：

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

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

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

現在看起來不錯。

來源

2012-01-22 17:51:14

仍然不工作...上負載第一圖像顯示出來...轉變到第二圖像沒有問題......然後屏幕和第三圖像上的第一圖像閃爍開始褪色。然後該重複對其餘的週期中，快速閃爍前一張圖像，而下一張則漸漸消失。 – kmc5117

是的你是對的。對不起，答案不正確。對於我來說，缺陷在FF中有時會發生（每30-50張幻燈片一次）。在Chrome和IE 9中，它根本不可重現。這意味着這個問題不在代碼中，而是它是一個FF特定的視覺缺陷。 –

的Javascript幻燈片循環罰款兩次，然後蟲子

回答

相關問題