javascript - 创建一个带有背景图片的 Javascript 画廊

标签 javascript jquery css image gallery

需要帮助创建完整的页面画廊。我尝试了各种选择。我正在尝试创建整页画廊,让用户一次垂直滚动 1 张图像。

这是我的代码:

<style>

#img1 {
background-image: url("<?php echo $image ;?>");
height:100vh !Important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

#img2 {
background-image: url("<?php echo $image2 ;?>");
height:100vh !Important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

#img3 {
background-image: url("<?php echo $image3 ;?>");
height:100vh !Important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>

<div id="img1"></div>
<div id="img2"></div>
<div id="img2"></div>

我坚持使用 javascript/jquery 解决方案来检测用户是否已滚动。如果用户向上滚动 10 个像素或向下滚动 10 个像素,我想更改图像。

这是我正在尝试实现的示例: http://themes.themegoods.com/photome/demo/gallery-archive/gallery-archive-fullscreen/

最佳答案

最好使用诸如“fullPage.js、smart scroll、pagePiling.js”之类的 js 库,它们可以帮助您制作完美的页面或画廊滚动,就像您想要实现的那样,有关更多信息,请访问以下链接:

关于javascript - 创建一个带有背景图片的 Javascript 画廊,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54605871/

相关文章:

javascript - JQuery 从数组中删除特定元素

javascript - 加载新数据时更新上下文行 d3

javascript - 未能对先前事件的元素调用操作

jQuery - 嵌套each() 的问题

javascript - 在动态表单上保留单选按钮的值

html - 如何删除 Elementor 中的小部件和布局子项之间的间隙/空间?

javascript - 使用jspdf将html转换为pdf时如何防止从中间剪切内容

javascript - 我如何使用ajax发送动态值

javascript - 跨域iframe问题

javascript - 如何使用屏幕分辨率设置 div 高度/宽度?