Question

我实施了一个小网站来显示图片。有2个项目，“下一个”项目可查看下一个图像，“上一个”项目可查看上一个图像。每张图片都符合文字。

所有内容都适用于Google Chrome，但不适用于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

Answer 1

您无法像这样指定路径（无法以这种方式访问文件资源路径，您需要了解您的项目结构）：

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

Answer 2

每次调用slideImage（stepSize，randomNumber）时尝试传递一个随机数。当我从数据库服务器获取图像时，我在firefox浏览器中也遇到了这样的问题。每次传递一个随机数解决了我的问题。

接受随机数作为slideImage（）

的参数

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

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

Firefox中未显示的图像 - Jquery

2 个答案: