幻燈片樣式圖像庫

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 。 更改為：

• 在列表項中的所有文本周圍添加了跨距包裝
• 添加了$(".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); } 

這些樣式設置透明層。 更改以適合您的口味。

Answer 2

像jCarousel這樣的東西應該可以解決問題。 輪播功能到位后，您可以通過CSS和包含標題的跨度添加懸停效果。

Answer 3

我只是在看基於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設置為true，同時使用jQuery .hover(); 將使用.show();事件監聽器 和.hide(); 需要時，在標題“類名.caption上輸入。 另外，使用jQuery設置不透明度可以在.hover();完成.hover(); 事件也是如此。

如果需要，最新版本的ContentFlow v1.0.2支持在同一網頁上的多個實例。