9

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

很有可能有成千上万的图像，每个链接都指向一个专门用于该图像的网页，所以我基本上需要一个可以有效处理这个问题的图像轮播。

4

4 回答 4

6

我认为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
    });
});

（点击这里查看效果。）

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

最后，剩下的就是点击图片去网站的功能。您可以尝试将幻灯片img标签放在适当的a标签内。如果循环插件不能与a标签一起播放，onclick图像上的事件处理程序应该可以完成工作。

于 2011-10-22T04:21:57.877 回答
1

您可以使用jQuery Tools 的 Scrollable作为滑块并将$get()调用关联到“下一步”按钮。

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

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

于 2011-10-22T05:24:38.247 回答
1

I've used jShowOff for a project.

Benefits:

  • You have complete control over each slide's HTML, (so, image or images, HTML, and links can be used
  • Per one of your requirements, the user is able to rotate the slides on their own

Problem

  • You'd have to come up with your own AJAX solution and tweak it.

http://ekallevig.com/jshowoff/

I have an example of my use of it here: http://www.rhmachine.com/ (the links can be modified to only show prev/next).

I'll dig around for a bit and see if I can find an AJAX solution already made for it.

于 2011-10-24T17:39:32.873 回答
0

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

于 2011-10-24T15:33:36.897 回答