带有动态加载的图像和链接的 Javascript 或 jQuery 图像轮播
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7758552/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript or jQuery image carousel with dynamically loaded images and links
提问by at.
Is there a good javascript or jQuery image carousel that will display 5 images and if there are more, the user can click next and the following image sources and link URLs will load through AJAX?
是否有一个好的 javascript 或 jQuery 图像轮播可以显示 5 张图像，如果有更多，用户可以单击下一步，以下图像源和链接 URL 将通过 AJAX 加载？
It's very possible there are thousands of images and each links to a webpage devoted to that image, so I basically need an image carousel that can efficiently deal with this.
很可能有数以千计的图像，并且每个链接都指向专门用于该图像的网页，因此我基本上需要一个可以有效处理此问题的图像轮播。
回答by Aron Boyette
I think the JQuery Cycle Pluginwill get you 50% of the way there. This facility is pretty easy to use and I think will give you the "click to get to more" images functionality that you're after (with some pretty nifty transition effects at that).
我认为JQuery Cycle Plugin会让你完成 50% 的工作。这个工具非常容易使用，我认为会给你提供你想要的“点击获取更多”图像功能（带有一些非常漂亮的过渡效果）。
However, I've only used the plugin with all the images defined in the page. In my case, I was doing a "slide show" to demonstrate the use of an application. The HTML was pretty simple...
但是，我只将插件与页面中定义的所有图像一起使用。就我而言，我正在做一个“幻灯片放映”来演示应用程序的使用。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;">< Prev</a>
<a href="javascript:moveSlide('next');" style="float: right;">Next ></a>
The associated JavaScript is...
关联的 JavaScript 是...
function moveSlide(direction) {
$("#slideshow").cycle(direction);
} // End function
$(document).ready(function () {
$("#slideshow").cycle({
fx: 'fade',
speed: 300,
timeout: 0
});
});
(Click hereto see the effect.)
（点击这里查看效果。）
As for addressing the additional challenge of loading new images when the user wants to fetch some more, I think that's just a matter of expanding on the code behind the "Next" link in my example. Your code would perform a JQuery AJAXcall to get the next images and then add them to the slideshowdiv.
至于在用户想要获取更多图像时加载新图像的额外挑战，我认为这只是在我的示例中扩展“Next”链接背后的代码的问题。您的代码将执行JQuery AJAX调用以获取下一个图像，然后将它们添加到幻灯片div。
Lastly, that leaves the functionality of clicking on the image to go to the site. You can try putting the slideshow imgtags inside of appropriate atags. If the cycle plugin doesn't play will with the atags, onclickevent handlers on the images should get the job done.
最后，剩下的功能就是点击图片进入网站。您可以尝试将幻灯片img标签放在适当的a标签内。如果循环插件不使用a标签，onclick图像上的事件处理程序应该完成工作。
回答by Thiago Curvelo
You could use jQuery Tools' Scrollableas slider and associate a $get()call to the 'next' button.
您可以使用jQuery Tools 的 Scrollable作为滑块并将$get()调用关联到“下一步”按钮。
Here's a demo: http://flowplayer.org/tools/demos/scrollable/edit.htm(Notice the 'add' button).
这是一个演示：http: //flowplayer.org/tools/demos/scrollable/edit.htm（注意“添加”按钮）。
In this demo, it just clones a divand append it. You could do the same when clicking on 'next' but loading content from elsewhere.
在这个演示中，它只是克隆 adiv并附加它。单击“下一步”但从其他地方加载内容时，您可以执行相同的操作。
回答by Kevin Nelson
I've used jShowOff for a project.
我在一个项目中使用了 jShowOff。
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
- 您可以完全控制每张幻灯片的 HTML，（因此，可以使用图像或图像、HTML 和链接
- 根据您的一项要求，用户可以自行旋转幻灯片
Problem
问题
- You'd have to come up with your own AJAX solution and tweak it.
- 您必须提出自己的 AJAX 解决方案并对其进行调整。
http://ekallevig.com/jshowoff/
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).
我在这里有一个使用它的例子：http: //www.rhmachine.com/（可以修改链接以只显示上一个/下一个）。
I'll dig around for a bit and see if I can find an AJAX solution already made for it.
我会仔细研究一下，看看我是否能找到已经为它制作的 AJAX 解决方案。
回答by Khan
The first solution is pretty good, another solution that you might like and that I use : http://jquery.malsup.com/cycle/
第一个解决方案非常好，另一个您可能喜欢并且我使用的解决方案：http: //jquery.malsup.com/cycle/
