spotlight.js图片画廊插件制作的点击弹出层全屏幻灯片切换效果,支持放大缩小、自动轮播、全屏展示、文字描述等功能。自适应电脑、平板和手机移动端。
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>