雙圖像滑塊組合

Question

我一直在到處搜索，但似乎無法找到任何東西。

我正在拍一張照片的作品集網站，他有這個特別的畫廊滑塊，他真的想要我在這裏尋求幫助。

，他希望有一個圖片庫的外觀像我的網站是這一個：http://www.dnamodels.com

上面一個與播放和暫停圖標。 所以，如果有人知道如何做這樣的事情，我會非常感謝任何幫助！

而非wordpress。

Answer 1

如果你知道一些jQuery你可以試試flexslider。它給你一個簡單的方法來建立自己的滑塊，並給你一些功能來控制它，喜歡動漫，接下來，分組等。

，你可以在這裏看到的例子：http://flexslider.woothemes.com/

Answer 2

這是相當簡單的。這是一條路可走：

1. 在HTML文件中創建一個UL包含要呈現的圖像李元素（可以是IMG標籤或作爲背景圖像的LI元素）。

2. 創建某種計數器，以便知道圖庫中的圖像總數以及爲每個LI元素/圖庫圖像提供唯一的ID。

3. 利用CSS使每個LI元素的絕對定位的元素填充整個容器的，但是（如果希望它在該示例中很好地褪色等或可見隱藏/不透明度0與一個漂亮的過渡屬性）

顯示無

4. 創建「活動」 CSS類使得它有可見的LI並在畫廊

5. 創建的區間中的JS功能附加到你的第一個LI元素 - 增加計數器變量每隔幾秒鐘（或重置它，如果它等於元素的總數），從您的畫廊中的所有LI元素中刪除活動類並添加將活動類添加到ID與您的變量值匹配的元素。

6. 將點擊事件綁定到您的畫廊，該畫面在調用上述功能（播放畫廊）和清除在該功能中運行的間隔（暫停畫廊）之間進行切換。爲了將光標圖標更改爲播放或暫停圖標 - 使用addClass/removeClass和使用「cursor：url（xxx/yyy.png），auto」的類。

7. 在準備好的文件上運行播放功能。