头像

spotlight.js图片画廊插件弹出层全屏幻灯片切换效果

来源:https://www.sucaihuo.com/js/4517.html 18***38 2019-07-09 11:49浏览(72) 收藏

spotlight.js图片画廊插件制作的点击弹出层全屏幻灯片切换效果,支持放大缩小、自动轮播、全屏展示、文字描述等功能。自适应电脑、平板和手机移动端。
spotlight.js图片画廊插件弹出层全屏幻灯片切换效果
分类:图片代码 > 图片轮播 难易:高级

程序员,你不是一个人;网站开发QQ群:35248186,在线充值,或联系QQ321037704直接充值

查看演示 下载资源: 4

手机扫码访问:

下载资源 下载积分: 30 积分

js代码

<script src="js/spotlight.bundle.js"></script>
<script type="text/javascript">
	const checkboxes = document.getElementsByTagName("input");

	const gallery = [{

		title: "Image 1",
		description: "This is a description.",
		src: "gallery/london-1758181.jpg"
	},{
		title: "Image 2",
		description: "This is a description.",
		src: "gallery/sea-1975403.jpg"
	},{
		title: "Image 3",
		description: "This is a description.",
		src: "gallery/newport-beach-2089906.jpg"
	}];

	window.showGallery = function(index){

		Spotlight.show(gallery, {

			index: index,
			theme: "dark",
			animation:  [
				checkboxes[0].checked && checkboxes[0].value,
				checkboxes[1].checked && checkboxes[1].value,
				checkboxes[2].checked && checkboxes[2].value,
				checkboxes[3].checked && checkboxes[3].value
			]
		});
	};
</script>
最新交易
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 2589223951

1 2