带有动态加载图像和链接的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
    });
});

(点击这里查看效果.)

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

最后,这使得点击图像的功能转到了网站.您可以尝试将幻灯片img标记放在适当的a标记内.如果循环插件没有与a标签一起播放,onclick则图像上的事件处理程序应该完成工作.