Javascript 如何使用导航按钮从服务器加载div中的图像？

我已经设置了缩略图和“上一步”和“下一步”按钮。单击缩略图时，它将加载一个带有导航按钮的空白div。我已经在网站上的一个文件夹中有了这些大图像

因此，我的问题是，当单击缩略图时，如何将图像加载到div中，并且在使用“上一个/下一个”按钮删除当前图像并加载列表中的下一个或上一个图像时，如何将这些图像更改为插入和移出

这需要AJAX吗？PHP？或者jQuery就足够了

最初，我打算加载页面上具有display:none属性的所有图像，并使用jQuery在其中导航。这个网站最终会有一个预加载程序，但我想要性能和加载时间的最佳策略。

你应该看看这个

---

基本上，您不需要任何服务器端交互，您需要在页面上放置一些链接，以便浏览器自行加载。加载图片时，您可以按任何方式对其进行操作，同时请记住，一旦浏览器下载了图片，它就会被缓存，下次您从远程服务器获取它时，实际上您只需从文件系统中提取它，只要您可以使用插件，而不是在jquery中从头开始编写，你有没有考虑过使用lighbox？有很多选择，而且很容易设置

---

这是一个很好的例子：

如果您正在呼叫数据库，但不想重新加载页面，那么您需要使用AJAXHmm，我会对此进行调查，这将是最后的手段。我试着从头开始做每件事，这样我就可以不用任何插件就可以学习了。但是，我想问题是如何使“下一个/上一个”按钮能够调出加载的图像？@RobbieFikes您可以将加载的图像保持在页面上，只需隐藏它们（CSS属性display:none；），因此当单击“下一个”时-隐藏所有图像，显示下一个图像（将当前索引保留在内存中）@RobbieFikes要实现平稳过渡，请使用CSS3的强大功能。此外，你还可以查看流行幻灯片库中使用的方法-这将对你的教育以及从头开始编写所有内容非常有益。我知道如何做到这一点，我只是想知道这种方法是否会降低性能，因为它是加载的，而不是隐藏的？这些是非常大的图像，我有大约50张。@RobbieFikes在本例中，我建议您这样做-不要一次加载所有图像，只加载前2张和后2张图像。例如，你从第10张图片开始-在第一轮中加载第10张图片并将其显示给用户。当用户忙的时候，加载上一个2和下一个2，这样当用户点击下一个或上一个时，他就不必等待了。调整它，测试它，比较不同浏览器的性能。还请记住，您应该以异步模式加载图像-使用JavaScript的优点。