使用jQuery实现图片的轮播

最新推荐文章于 2025-06-09 13:21:12 发布

原创最新推荐文章于 2025-06-09 13:21:12 发布 · 743 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍如何使用Galleria插件创建一个具有方向键和小图片导航的相册，包括必要的图像库、colorbox插件及Galleria的配置代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先看一下效果图。在点击旁边的方向键和下方的小图片会直接跳过去
在这里插入图片描述
需要使用到图像库，colorbox插件，galleria，如下图所示

最后在html代码中加上js代码，代码如下

<SCRIPT src="jquery-1.8.3.js"></SCRIPT>
	<SCRIPT src="galleria-1.2.8/galleria/galleria-1.2.8.js"></SCRIPT>
	<DIV id="gallery" style="margin-top: 100px;margin-left: 100px;">
		<img src="img/1.jpg" />
		<img src="img/2.JPG" />
		<img src="img/3.JPG" />
		<img src="img/4.JPG" />
		<img src="img/5.JPG" />
	</DIV>
	<SCRIPT>
		Galleria.loadTheme('galleria-1.2.8/galleria/themes/classic/galleria.classic.min.js');
		$("#gallery").galleria({
			width: 950,
			height: 400
		});
	</SCRIPT>