电影胶片风格图片库

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

悬停修改：
{/ 1}}和$(this).prepend($("<div class='hover-transparency'></div>"));在悬停进/出时添加/删除透明图层。

CSS修改：

$(this).find("div:first").remove();

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

Answer 2

像jCarousel这样的东西应该可以解决问题。一旦您具有轮播功能，您可以通过CSS和包含标题的范围添加悬停效果。

Answer 3

我只是在查看基于JavaScript的ContentFlow Plugin。

它们包含一个单独的附加插件库，您可以使用它来处理幻灯片要求，特别是这个HERE。当您在3个图像上使用鼠标滚轮时，它会滚动1.也就是说，您可以在单击箭头按钮时修改插件以执行相同操作。

示例插件标记如下所示：

{
  shownItems: 3,    //number of visible items
  showCaption: true // show item caption
  width: 100,       // relative item width
  height: 100,      // relative item height
  space: 0.4        // relative item spacing
}

为了解决只有鼠标悬停才能看到标题的问题，我将showCaption设置为始终为true，同时使用jQuery .hover();事件监听器，该标题将在标题上使用.show();和.hide();需要时，班级名称.caption。此外，使用jQuery设置不透明度也可以在.hover();事件中完成。

最新版本的 ContentFlow v1.0.2 支持同一网页上的多个实例（如果需要）。