Question

需要帮助来创建一个全页画廊。我尝试了各种选择。我正在尝试创建一个全页画廊，该画廊允许用户一次垂直滚动一张图像。

这是我的代码：

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

Answer 1

最好使用js库（例如“ fullPage.js，智能滚动，pagePiling.js”），这些库可以帮助您制作出理想的页面或图库滚动，如您想要实现的那样，有关更多信息，请参见以下链接：< / p>

使用背景图片创建Javascript画廊

1 个答案: