Fatal编程技术网
  • javascript/
  • Javascript 希望从每个“文件夹”上的文件夹加载新图像；“下一步”；点击

Javascript 希望从每个“文件夹”上的文件夹加载新图像；“下一步”；点击

javascript jquery image directory

Javascript 希望从每个“文件夹”上的文件夹加载新图像；“下一步”；点击,javascript,jquery,image,directory,Javascript,Jquery,Image,Directory,我试图使用Jquery.load函数在每次单击“下一步”箭头时用新图片刷新页面上的图片框，而不刷新整个页面。我有一个大约300.jpeg的文件夹，并希望有它从该文件夹加载，一次一个图像。我对编码比较陌生，所以我不完全习惯所有的语言以及它们的用途。这可能吗？或者我需要列出实际代码中的每个图像吗 提前感谢。方法1: 在第一次加载时关闭所有图像的URL，然后在单击时继续更改img标签上的URL <!doctype html> <html lang="en"> <head&

我试图使用Jquery.load函数在每次单击“下一步”箭头时用新图片刷新页面上的图片框，而不刷新整个页面。我有一个大约300.jpeg的文件夹，并希望有它从该文件夹加载，一次一个图像。我对编码比较陌生，所以我不完全习惯所有的语言以及它们的用途。这可能吗？或者我需要列出实际代码中的每个图像吗

提前感谢。

方法1:

在第一次加载时关闭所有图像的URL，然后在单击时继续更改img标签上的URL

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>click demo</title>

  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript">
  var images = [];

  images.push("http://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Apple_Headquarters_in_Cupertino.jpg/800px-Apple_Headquarters_in_Cupertino.jpg");
  images.push("http://upload.wikimedia.org/wikipedia/commons/2/27/Apple_I.jpg");
  images.push("http://upload.wikimedia.org/wikipedia/en/5/5d/Ad_apple_1984.jpg");
  images.push("http://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Macintosh_128k_transparency.png/511px-Macintosh_128k_transparency.png");

  var currentImageIndex = 0;
  </script>
</head>
<body>

<div>

<img id="imgFrame" src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Apple_Headquarters_in_Cupertino.jpg/800px-Apple_Headquarters_in_Cupertino.jpg" style="width:400px;height:400px;" />
<br>
<input type="button" id="next" value="next"/>
</div>

<script>
$( "#next" ).click(function() {

  if(currentImageIndex < images.length){
    currentImageIndex += 1;  
  }
  else{
    currentImageIndex = 0;
  }

  $("#imgFrame").attr("src",images[currentImageIndex]);
});
</script>

</body>
</html>


单击演示
var图像=[]；
图像。推送（“http://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Apple_Headquarters_in_Cupertino.jpg/800px-Apple_Headquarters_in_Cupertino.jpg");
图像。推送（“http://upload.wikimedia.org/wikipedia/commons/2/27/Apple_I.jpg");
图像。推送（“http://upload.wikimedia.org/wikipedia/en/5/5d/Ad_apple_1984.jpg");
图像。推送（“http://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Macintosh_128k_transparency.png/511px-Macintosh_128k_transparency.png");
var currentImageIndex=0；


$（“#下一步”）。单击（函数（）{
if（currentImageIndex
方法2:

  • 创建一个web服务，它将为您提供下一个图像URL
  • 跟踪当前图像
  • 单击next按钮执行AJAX请求并获取下一个图像url
  • 如上所示更改img标记URL
    • 你可以在这里得到一个想法（通过你未来的定制）：我不确定谁投了反对票，我试图提高它，但我还不能投票，因为我的帐户太新了，对不起。不过我对答案很满意，谢谢。有一件事，我需要将每个图像都添加到这个列表中吗？正如我所说的，我有300多张图片，我想通过点击循环浏览，如果可以从文件夹中提取，那将是首选。您使用哪种服务器端语言？你也在使用数据库吗？您需要在服务器端执行这些操作。我提供了第一种方法，因为您是编程新手。为了创建更好的web应用程序，随着编程经验的增加，您必须将此方法与第二种方法混合使用。您不能投票，但如果答案对您有帮助，则您可以将其标记为“有帮助”或“已回答”。）