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查看效果。）

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

最后，这样就可以点击图片来访问网站。您可以尝试将幻灯片img标记放在适当的a标记内。如果循环插件无法使用a标记，则图像上的onclick事件处理程序应该完成工作。

Answer 2

您可以使用jQuery Tools' Scrollable作为滑块，并将$get()电话与“下一步”按钮相关联。

这是一个演示： http://flowplayer.org/tools/demos/scrollable/edit.htm（注意'添加'按钮）。

在此演示中，它只是克隆div并附加它。点击“下一步”但从其他地方加载内容时，您也可以这样做。

Answer 3

我已经将jShowOff用于项目。

优点：

您可以完全控制每张幻灯片的HTML，（因此，可以使用图片或图片，HTML和链接
根据您的一项要求，用户可以自行轮换幻灯片

问题

您必须提出自己的AJAX解决方案并进行调整。

http://ekallevig.com/jshowoff/

我在这里有一个使用它的示例：http://www.rhmachine.com/（链接可以修改为仅显示上一个/下一个）。

我会仔细研究一下，看看我是否能找到一个已经为它制作的AJAX解决方案。

Answer 4

第一个解决方案非常好，您可能会喜欢并使用的另一个解决方案：http://jquery.malsup.com/cycle/

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

4 个答案: