滚动经过元素时触发 jquery 事件
我正在构建一个水平滚动网站来显示图像。幻灯片将包含不同的“系列”照片。我想为每个系列的第一张图像添加一个 ID。
当您水平滚动经过带有 ID 的第一张图像时，将显示包含该系列标题的 div 框。当您滚动浏览具有不同 ID 的新图像时，会显示该系列的标题。
我如何使用 jQuery 来实现这一点？
这就是我的 HTML 的样子。
<div style="overflow: auto; white-space: nowrap;">
<img src="p001.jpg" id="people">
<img src="p002.jpg">
<img src="p003.jpg">
<img src="p004.jpg">
<img src="p005.jpg">
<img src="l001.jpg" id="landscape">
<img src="l002.jpg">
<img src="l003.jpg">
<img src="l004.jpg">
<img src="l005.jpg">
<img src="bw001.jpg" id="blackwhite">
<img src="bw002.jpg">
<img src="bw003.jpg">
<img src="bw004.jpg">
<img src="bw005.jpg">
</div>
<div>
The title of the series would show here
</div>
这有道理吗？我希望...
I am building a horizontal scrolling website to display images. The slideshow would contain different 'series' of photos. I want to add an ID to the first image of each series.
When you scroll horizontally past the first image with the ID, a div box containing the series' title would show. When you scroll past a new image with a different ID, it's series' title would show.
How can I use jQuery to make this happen?
This is what my HTML would look like.
<div style="overflow: auto; white-space: nowrap;">
<img src="p001.jpg" id="people">
<img src="p002.jpg">
<img src="p003.jpg">
<img src="p004.jpg">
<img src="p005.jpg">
<img src="l001.jpg" id="landscape">
<img src="l002.jpg">
<img src="l003.jpg">
<img src="l004.jpg">
<img src="l005.jpg">
<img src="bw001.jpg" id="blackwhite">
<img src="bw002.jpg">
<img src="bw003.jpg">
<img src="bw004.jpg">
<img src="bw005.jpg">
</div>
<div>
The title of the series would show here
</div>
Does this make sense? I hope...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
试用 GalleryView：
http://spaceforaname.com/galleryview/
您可能会发现这样更容易显示每个内容的标题图像，而不是捕获 id 并动态更改它。
Tryout GalleryView:
http://spaceforaname.com/galleryview/
You may find this easier to display the title for each image instead of trapping the id and changing it on the fly.