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

发布于 2024-12-09 20:12:46 字数 157 浏览 0 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

墨落画卷 2024-12-16 20:12:46

我认为 JQuery Cycle 插件将为您提供 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;">< Prev</a>
<a href="javascript:moveSlide('next');" style="float: right;">Next ></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 事件处理程序应该可以完成工作。

I think the JQuery Cycle Plugin will 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).

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...

<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...

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

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

(Click here to 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 AJAX call to get the next images and then add them to the slideshow div.

Lastly, that leaves the functionality of clicking on the image to go to the site. You can try putting the slideshow img tags inside of appropriate a tags. If the cycle plugin doesn't play will with the a tags, onclick event handlers on the images should get the job done.

回复收藏 0 原文