的Javascript只適用於Chrome和Firefox的不

出於某種原因，這片代碼工作剛剛發現在Chrome中，但不能在Firefox。我不知道爲什麼，所以我希望有人能幫助我。的Javascript只適用於Chrome和Firefox的不

DIV的「幻燈片」，它的內容不會顯示在所有的Firefox。這就像JS甚至沒有加載。

HTML

<div id="slideshow"> 
      <div class="slideshow_text"> 
       <p class="txt1">Er du klar?</p> 
       <p class="txt2">til et <span>NYT</span></p> 
       <p class="txt3">&</p> 
       <p class="txt4">BEDRE <span>JEG</span>?</p> 
      </div> 
      <img id="slide_1" src="img/ss/large_slide1.jpg" alt="Woman"> 
      <img id="slide_2" src="img/ss/large_slide2.jpg" alt="Woman"> 
      <img id="slide_3" src="img/ss/large_slide3.jpg" alt="Woman"> 
     </div>

$(document).ready(function() { 
$("#slide_1").animate({left: 0}, 700); 

$(".slideshow_text").slideDown("slow"); 

$("#slide_1").click(function() { 
    $("#slide_1").animate({left: "-980px"}, 700); 
    $("#slide_2").animate({left: 0}, 700); 
    $("#slide_3").css("left", "980px"); 
}); 
$("#slide_2").click(function() { 
    $("#slide_2").animate({left: "-980px"}, 700); 
    $("#slide_3").animate({left: 0}, 700); 
    $("#slide_1").css("left", "980px"); 
}); 

$("#slide_3").click(function() { 
    $("#slide_3").animate({left: "-980px"}, 700); 
    $("#slide_1").animate({left: 0}, 700); 
    $("#slide_2").css("left", "980px"); 
}); 

});

CSS

#slideshow { 
width: 980px; 
height: 445px; 
margin: 50px auto 25px auto; 
position: relative; 
overflow: hidden; 
} 

#slide_1, #slide_2, #slide_3 { 
position: absolute; 
top: 0; 
left: 980px; 
} 

.slideshow_text { 
display: none; 
width: 200px; 
background-color: rgba(255, 255, 255, 0.4); 
position: absolute; 
top: 100px; 
left: 650px; 
z-index: 9; 
border-radius: 4px; 
padding: 15px; 
} 

.slideshow_text p{ 
float: left; 
width: 100%; 
color: #FFFFFF; 
}

如果您需要更多的細節，讓我知道。坦率地說，我不知道還有什麼可寫的。

來源

2013-11-27 NizeGuy

你看到了什麼，當你在Firefox中的JavaScript控制檯看？ –

我看到這個：[13：20：24.356] SyntaxError：使用// @表示源映射URL pragmas已被棄用。使用//＃代替@ http：// localhost：8383/WebProeve1/js/jquery-1.10.2.min.js：1 – NizeGuy

這只是一個警告，不會破壞您的代碼。爲了解決這個問題，在jquery-1.10.2.min.js中找到並刪除'// @ sourceMappingURL = jquery-1.10.2.min.map'這一行' –

它是否幫助，如果你把你的圖像的寬度和高度？

#slide_1, #slide_2, #slide_3 { 
position: absolute; 
top: 0; 
left: 980px; 
height: 445px; 
width: auto; 
}

來源

2013-11-27 12:35:44

添加一個寬度和高度並沒有幫助。 – NizeGuy

您正在使用什麼 的jQuery的版本

？如果你使用jQuery 1.9.1它將在FireFox中工作，但是，使用jQuery 2.0.2它不會[至少使用它沒有的舊瀏覽器檢查]

Check out this example I created根據你的代碼[沒有代碼改變，只是使用jQuery 1.9.1]，這是否解決您的問題？

來源

2013-11-27 12:37:03

顯然，這是我的「#wrapper指定」是倒在它的自我，隱藏內的所有內容。

添加的高度並沒有這樣的伎倆，但添加邊框的伎倆和內容將顯示。

來源

2013-11-28 10:41:25 NizeGuy

的Javascript只適用於Chrome和Firefox的不

回答

相關問題