双图像滑块组合

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. 在准备好的文件上运行播放功能。