Изображения не отображаются в Firefox - JQuery

Я реализовал небольшой веб-сайт для показа изображений. Есть 2 элемента, «следующий» элемент, чтобы увидеть следующее изображение и элемент «prev», чтобы увидеть предыдущее изображение. Каждому изображению предоставляется текст.Изображения не отображаются в Firefox - JQuery

Все работает на Google Chrome, но не на 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 ошибка: Журнал erro на немецком языке Warnung: Fehler beim Verarbeiten des Wertes für 'filter'. Разделение проигнорировано. 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 много для вашего ответа, но это не сработало. Я уже пробовал. Я хочу, чтобы вложенная erything, позже я могу отделить ее, но не сейчас. Я перемещаю весь мой проект в том же каталоге, и я использовал background-image: url (images/yourimagename.jpg); но Firefox по-прежнему не отображает изображений ... Я не знаю, что я должен сделать, чтобы решить это! – lisa

, тогда должна быть какая-то другая проблема, попробуйте посмотреть, что находится на 'line: 909' в файле ошибки. – Jai

где вы тестируете свой файл 'localhost' или только в URL-адресе filesytem. – 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

ответ

Смежные вопросы