Question

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

提前谢谢。

Answer 1

方法1：

在首次加载时关闭所有图片的网址，然后在点击时继续更改img标记上的网址。

<!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>

方法2：

创建一个Web服务，为您提供下一个图片网址。
跟踪当前图像。
点击下一个按钮执行AJAX请求并获取下一个图像网址。
如上所示更改img标记网址。

想要在每次“下一次”点击时从文件夹加载新图像

1 个答案: