Question

可以请一些建议如何添加图像路径tp jQuery？我试图将此脚本中的彩色框替换为实际的真实图像，我现在使用C：就像我在本地工作一样。

理想情况下，我希望在屏幕上一个接一个地显示5个图像，但我希望图像可以点击，点击后转到特定网址。

这可能吗？

由于

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
    $("#div4").fadeIn(5000);
    $("#div5").fadeIn(7000);
  });
});
</script>
</head>
   <body>
    <p>Demonstrate fadeIn() with different parameters.</p>
    <button>Click to fade in boxes</button>
    <br />
    <br />
    <div id="div1">
        <img src="images/myimage1.png" alt="about" width="304" height="228"/>
    </div>
    <div id="div2">
        <img src="images/myimage2.png" alt="about" width="304" height="228"/>
    </div>
    <div id="div3">
        <img src="images/myimage3.png" alt="about" width="304" height="228"/>
    </div>
    <div id="div4">
        <img src="images/myimage4.png" alt="about" width="304" height="228"/>
    </div>
    <div id="div5">
        <img src="images/myimage5.png" alt="about" width="304" height="228"/>
    </div>
</body>
</html>

Answer 1

您无法从本地路径获取图像。因为浏览器将从客户端打开。因此您无法从本地计算机文件夹中获取图像。您需要将图像存储在服务器路径上并从服务器路径中检索它。

在项目中创建文件夹并将图像存储在该文件夹中，以便在启动服务器时可以从项目中访问它。

Answer 2

你应该使用相对图像路径。为您的项目创建目录结构。例如c：\ myProject。将图像目录添加到其中（c：\ myProject \ images）。然后你可以使用这样的路径：

<img src="images/myimage.jpeg" alt=""\>

Answer 3

如您概述的那样，有几个问题可以解决这个问题：

首先（如其他答案所述），您需要在项目中拥有图像（例如，在本地和服务器上运行的相对路径）。

其次，你没有提供任何CSS，但要做淡出，div最初需要隐藏。

第三，您可以更改window.location以从代码转到另一个页面，或者只是将图像包装在锚点中。我在以下JSFiddle中提供了每种类型的示例：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/nHk3k/4/

当我按下按钮时看起来像这样：

enter image description here

如果您不使用锚点，您还希望使用这两种样式在div上使用手形光标（对于跨浏览器支持）：

   cursor: pointer;
   cursor: hand;

Answer 4

为div添加display：none样式

jQuery使用href添加图像路径样式

4 个答案:

JSFiddle：http://jsfiddle.net/TrueBlueAussie/nHk3k/4/