2

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

画廊要求：

  1. 单击箭头时，图库条将向左/向右移动一张图片
  2. 将鼠标悬停在图像上会使图像变暗，并显示有关图像的一些标题

幻灯片风格画廊的例子

4

3 回答 3

4

我刚刚回答了有人使用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);
}

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

于 2012-06-12T01:17:25.703 回答
0

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

于 2012-06-12T00:21:25.160 回答
0

我只是在看基于 JavaScript 的ContentFlow 插件。

它们包括一个单独的附加插件库，您可以使用它来满足您的幻灯片需求，特别是这里的这个。当您在 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 设置为始终为真，同时使用将在需要时使用标题类名称的 jQuery事件侦听.hover();器。此外，使用 jQuery 设置不透明度也可以在事件中完成。.show();.hide();.caption.hover();

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

于 2012-06-12T09:12:33.587 回答