javascript - 胶片风格图片库

Question

我正在尝试弄清楚如何创建一个如下图所示的图片库，以便我可以将它放到我的网站上。我想知道是否有人可以指出正确的教程方向？我找到了很多可以展示我的图片的不错的画廊，但没有一个能像我所追求的幻灯片风格那样展示图片。

画廊要求:

1. 点击箭头时，图库条将移动左/右一张照片
2. 将鼠标悬停在图像上会使图像变暗，并显示一些图片说明

Answer 1

我刚刚回答了有人使用 carouFredSel 的问题.这个 jQuery 插件看起来可以很好地工作，但我认为它没有内置的悬停效果。老实说，这是比较容易的部分。

诀窍是使宽度略大于要显示的图像，这会导致每侧显示部分图像。

这是一个jsfiddle为了显示。

---

更新:
OP 询问是否可以重新定位页面导航链接。我修改了 jsfiddle以这种方式工作。新增内容如下:

.list_carousel {
    position: relative;
}
#prev2 {
    position: absolute;
    top: 35px;
    left: 0;
}
#next2 {
    position: absolute;
    top: 35px;
    right: 0;
}

如果你有一个相对定位的容器元素，你可以绝对定位子元素。我在 list_carousel 中添加了相对定位容器，那么我就可以完全将导航箭头定位在容器内。更改 top值垂直定位，左/右水平定位。

我还一起删除了寻呼机，因为它不是基于原始示例的要求。如果您将页面箭头更改为图像，这几乎就是您想要的。

---

更多更新
我决定更进一步，制作 hover效果更像例子。查看新 jsfiddle .变化是:

• 为列表项中的所有文本添加了 span 包装器
• 已添加 $(".list_carousel li span").hide();隐藏所有跨度
• 修改悬停事件以切换跨度

我还添加了一些 CSS 来定位跨度文本:

.list_carousel li { 
    position: relative;
}
.list_carousel li span {
    position: absolute;
    bottom: 0;
    display: block;
    text-align: center;
    width: 100%;
}

---

最终更新(我保证!)
我决定全力以赴并添加透明层: jsfiddle

悬停修改:
$(this).prepend($("<div class='hover-transparency'></div>"));和 $(this).find("div:first").remove();在悬停时添加/删除透明层。

CSS 修改:

.hover-transparency {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.60);
}

这些样式的透明层。更改以适合您的口味。