jquery-plugins - 带有动态加载图像和链接的 Javascript 或 jQuery 图像轮播

Question

是否有一个好的 javascript 或 jQuery 图像轮播可以显示 5 张图像，如果有更多图像，用户可以单击下一步，以下图像源和链接 URL 将通过 AJAX 加载？

很有可能有数千张图片，并且每张链接都指向专门针对该图片的网页，因此我基本上需要一个能够有效处理这种情况的图片轮播。

Answer 1

我认为 JQuery Cycle Plugin会让你完成 50% 的路程。此工具非常易于使用，我认为将为您提供您所追求的“点击以获取更多”图像功能(带有一些非常漂亮的过渡效果)。

但是，我只将插件与页面中定义的所有图像一起使用。就我而言，我正在做一个“幻灯片放映”来演示应用程序的使用。 HTML 非常简单...

<div id="slideshow">
  <img src="Images/Usage1.png" />
  <img src="Images/Usage2.png" />
  <img src="Images/Usage3.png" />
  <img src="Images/Usage4.png" />
  <img src="Images/Usage5.png" />
  <img src="Images/Usage6.png" />
  <img src="Images/Usage7.png" />
  <img src="Images/Usage8.png" />
  <img src="Images/Usage9.png" />
  <img src="Images/Usage10.png" />
</div>
<a href="javascript:moveSlide('prev');" style="float: left;">&lt; Prev</a>
<a href="javascript:moveSlide('next');" style="float: right;">Next &gt;</a>

关联的 JavaScript 是...

function moveSlide(direction) {
    $("#slideshow").cycle(direction);
} // End function

$(document).ready(function () {
    $("#slideshow").cycle({
        fx: 'fade',
        speed: 300,
        timeout: 0
    });
});

(点击here查看效果。)

至于解决当用户想要获取更多图像时加载新图像的额外挑战，我认为这只是在我的示例中扩展“下一步”链接背后的代码的问题。您的代码将执行 JQuery AJAX调用以获取下一张图片，然后将它们添加到幻灯片 div。

最后，还保留了点击图片进入网站的功能。您可以尝试将幻灯片 img 标签放在适当的 a 标签内。如果循环插件不播放 a 标签，图像上的 onclick 事件处理程序应该完成工作。