圖像不顯示在Firefox - Jquery

我實施了一個小webseite來顯示圖像。有2個項目，「下一個」項目看到下一個圖像和「prev」項目看到前一個圖像。每張圖片都符合文字。圖像不顯示在Firefox - Jquery

一切工作在谷歌瀏覽器，但不是在Firefox！能否請你告訴我，我必須做的，以使其在Firefox

在這裏工作是我的代碼：

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI Spinner - Default functionality</title> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<style type="text/css"> 
#items { 
    position : relative; 
    width : 400px; 
    height : 200px; 
    top : 20px; 
    left : 20px; 
} 
.item { 

    position : absolute; 
    border : 1px solid #ccc; 
    width : 398px; 
    height : 198px; 
    display :none; 
    text-align : right; 
    font-size : 40px; 
} 
.first{ 
    display : block; 
} 
#controls { 
    margin-top : 30px; 
} 
li { 
    display : inline-block; 
    padding : 5px; 
    border : 1px solid #ccc; 
    background-color : #eee; 
    cursor : pointer; 
} 
#play { 
    display : none; 
} 
.first#item1 { 
    background-image: url(D:/images/images1.jpg); 
    background-repeat: no-repeat; 
     width : 398px; 
    height : 198px; 
} 
.item#item2 { 
     background-image: url(D:/images/images2.jpg); 
    background-repeat: no-repeat; 
     width : 398px; 
    height : 198px; 
} 
.item#item3 { 
     background-image: url(D:/images/images2.jpg); 
    background-repeat: no-repeat; 
     width : 398px; 
    height : 198px; 
} 

.item#item4{ 
     background-image: url(D:/images/images4.jpg); 
    background-repeat: no-repeat; 
     width : 398px; 
    height : 198px; 
} 
.item#item5{ 
    background-image: url(D:/images/images5.jpg); 
    background-repeat: no-repeat; 
     width : 398px; 
    height : 198px; 
} 
</style> 
<script> 
$(function() { 

//To store timeout id 
var timeoutId; 

var slideImage = function(step) { 

    if (step == undefined) step = 1; 

    //Clear timeout if any 
    clearTimeout (timeoutId); 

    //Get current image's index 
    var indx = $('.item:visible').index('.item'); 

    //If step == 0, we don't need to do any fadein our fadeout 
    if (step != 0) { 
     //Fadeout this item 
     $('.item:visible').fadeOut(); 
    } 

    //Increment for next item 
    indx = indx + step ; 

    //Check bounds for next item 
    if (indx >= $('.item').length) { 
     indx = 0; 
    } else if (indx < 0) { 
     indx = $('.item').length - 1; 
    } 

    //If step == 0, we don't need to do any fadein our fadeout 
    if (step != 0) { 
     //Fadein next item 
     $('.item:eq(' + indx + ')').fadeIn(); 
    } 

    //Set Itmeout 
    timeoutId = setTimeout (slideImage, 5000); 
}; 

//Start sliding 
slideImage(0); 

//When clicked on prev 
$('#prev').click(function() { 

    //slideImage with step = -1 
    slideImage (-1); 
}); 

//When clicked on next 
$('#next').click(function() { 

    //slideImage with step = 1 
    slideImage (1); 
}); 

//When clicked on Pause 
$('#pause').click(function() { 

    //Clear timeout 
    clearTimeout (timeoutId);  

    //Hide Pause and show Play 
    $(this).hide(); 
    $('#play').show(); 
}); 

//When clicked on Play 
$('#play').click(function() { 

    //Start slide image 
    slideImage(0); 

    //Hide Play and show Pause 
    $(this).hide(); 
    $('#pause').show();  
}); 

}); 
</script> 
</head> 
<body> 
<div id='items'> 
    <div id= 'item1' class='item first'>item 1</div> 
    <div id= 'item2' class='item'>item2</div> 
    <div id= 'item3' class='item'>item3</div> 
    <div id= 'item4' class='item'>item4</div> 
    <div id= 'item5' class='item'>item5</div> 

</div> 
<ul id='controls'> 
    <li id='prev'> << Prev</li> 

    <li id='next'>Next >> </li> 
</ul> 
</body> 
</html>

結果是這樣的： enter image description here

來源

2013-12-23 lisa

檢查您的控制檯，你得到任何錯誤？ –

cntrl + shift + j，錯誤控制檯 – tariq

Oh jes的錯誤是：錯誤日誌是在德國 Warnung：Fehler beim Verarbeiten des Wertes fur'filter'。 Deklaration ignoriert。 Quelldatei：http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css Zeile：909 – lisa

不能指定你的路徑是這樣的（文件資源路徑不能這樣訪問，你需要了解你的項目結構）：

D:/images/images4.jpg // <----mustn't do this way

實際上你應該把你的圖像放在你項目的圖像目錄中。

您需要按照這樣的結構：

-YourProject 
---[css] //<--------put all external css files in this directory 
---[js] //<--------put all external js files in this directory 
---[images] // <----put all the images in this directory 
--your htmlfile 
--your htmlfile 
...... and so on....

，你應該參考你的形象這種方式，然後（只有當您在外部CSS文件中這樣做）：

background-image: url(../images/yourimagename.jpg);

和如果你已經完成了你的css嵌入風格（<style></style>在head），那麼你需要指定你的圖像路徑沒有../：

background-image: url(images/yourimagename.jpg);

來源

2013-12-23 09:19:09 Jai

thx很多爲您的答案，但它沒有奏效。我已經嘗試過了。我想要嵌入一些東西，後來我可以將它分開，但現在不是。我將我的所有項目移動到同一個目錄中，並使用了background-image：url（images/yourimagename.jpg）;但Firefox仍然顯示沒有圖像......我不知道我該怎麼做才能解決這個問題！ – lisa

然後肯定還有其他的問題，試着看看錯誤文件中'line：909'的內容。 – Jai

你在哪裏測試你的文件'localhost'或者只是在一個filesytem url中。 – Jai

嘗試每次調用slideImage（stepSize，randomNumber）時傳遞一個隨機數。當我從數據庫服務器獲取圖像時，我也在Firefox瀏覽器中遇到過這樣的問題。每次傳遞一個隨機數解決了我的問題。

接受了slideImage一個隨機數作爲一個參數（）

var slideImage = function(step,randomNumber){ 
//.... 
//Your code 
//... 
}; 

//slideImage call 
slideImage(1,Math.random());

來源

2013-12-23 09:52:37 Abhishek

你能給我一個代碼示例嗎？我不明白！ – lisa

圖像不顯示在Firefox - Jquery

回答

相關問題