我现在到处搜索,但似乎找不到任何东西。
我正在为一张照片制作一个投资组合网站,他有一个他真正想要的特殊画廊滑块,所以我在这里寻求帮助。
他希望图片库看起来像这样的网站来自这个:http://www.dnamodels.com
带有播放和暂停图标的顶部。 所以,如果有人知道如何做这样的事情,我真的很感激任何帮助!
非wordpress。
答案 0 :(得分:0)
如果你知道一些jquery,你可以试试flexslider。它为您提供了一种简单的方法来构建自己的滑块,并为您提供一些控制它的功能,如动画,下一个,上一个等。
您可以在此处查看示例:http://flexslider.woothemes.com/
答案 1 :(得分:0)
这很简单。这是一种方法:
在您的html文件中创建一个带有LI元素的UL,其中包含您想要呈现的图像(可以在IMG标记中或作为LI元素的背景图像)。
创建某种计数器,以便了解您在图库中拥有的图像总数,并为每个LI元素/图库图像提供唯一ID。
使用css使每个LI元素成为填充整个容器的绝对定位元素但是没有显示(或者可见隐藏/不透明度0具有良好的过渡属性,如果您希望它像示例中那样很好地淡出)< / p>
创建一个“活动”css类,使LI显示它并将其附加到库中的第一个LI元素
创建一个带有间隔的JS函数 - 每隔几秒递增一个计数器变量(如果它等于元素的总数,则重置它),从库中的所有LI元素中删除活动类并添加活动类到ID与您的变量值匹配的元素。
将点击事件绑定到您的图库,该图库在调用上述功能(播放图库)和清除功能中运行的间隔(暂停图库)之间切换。为了更改光标图标以播放或暂停图标 - 使用addClass / removeClass与使用“cursor:url(xxx / yyy.png),auto”的类。
在文档就绪时运行播放功能。