双图像滑块组合

时间:2017-03-09 08:24:21

标签: javascript php jquery html css

我现在到处搜索,但似乎找不到任何东西。

我正在为一张照片制作一个投资组合网站,他有一个他真正想要的特殊画廊滑块,所以我在这里寻求帮助。

他希望图片库看起来像这样的网站来自这个:http://www.dnamodels.com

带有播放和暂停图标的顶部。 所以,如果有人知道如何做这样的事情,我真的很感激任何帮助!

非wordpress。

2 个答案:

答案 0 :(得分:0)

如果你知道一些jquery,你可以试试flexslider。它为您提供了一种简单的方法来构建自己的滑块,并为您提供一些控制它的功能,如动画,下一个,上一个等。

您可以在此处查看示例:http://flexslider.woothemes.com/

答案 1 :(得分:0)

这很简单。这是一种方法:

  1. 在您的html文件中创建一个带有LI元素的UL,其中包含您想要呈现的图像(可以在IMG标记中或作为LI元素的背景图像)。

  2. 创建某种计数器,以便了解您在图库中拥有的图像总数,并为每个LI元素/图库图像提供唯一ID。

  3. 使用css使每个LI元素成为填充整个容器的绝对定位元素但是没有显示(或者可见隐藏/不透明度0具有良好的过渡属性,如果您希望它像示例中那样很好地淡出)< / p>

  4. 创建一个“活动”css类,使LI显示它并将其附加到库中的第一个LI元素

  5. 创建一个带有间隔的JS函数 - 每隔几秒递增一个计数器变量(如果它等于元素的总数,则重置它),从库中的所有LI元素中删除活动类并添加活动类到ID与您的变量值匹配的元素。

  6. 将点击事件绑定到您的图库,该图库在调用上述功能(播放图库)和清除功能中运行的间隔(暂停图库)之间切换。为了更改光标图标以播放或暂停图标 - 使用addClass / removeClass与使用“cursor:url(xxx / yyy.png),auto”的类。

  7. 在文档就绪时运行播放功能。