如何创建一个带有css动画元素的jquery图像滑块？

Question

我的客户希望我为他们的网站创建一个图像滑块(旋转木马)。他们希望幻灯片真正地“滑动”，而不是淡入或其他任何东西，还希望幻灯片中的内容淡入淡出。与下面的代码非常类似：http://www.squarespace.com/

现在我试着在jquery插件和教程中搜索了很多关于如何创建这样的东西，我发现很少，主要是关于codrop，但没有一个我可以使用的，并且符合标准。我也找到了Flexslider，但我只是不知道如何使用css3过渡或关键帧为里面的内容创建动画。同样，就像我链接的Squarespace一样。

请让我知道这一点，非常感谢。

Answer 1

这是我所知道的最好的滑块之一：http://css-tricks.com/examples/AnythingSlider/#&panel1-1。

他还做了一个关于自己制作http://css-tricks.com/slider-with-sliding-backgrounds/的教程，你可以把它作为制作自己的起点

Answer 2

为什么要重新发明轮子呢？有大量的图像滑块旋转木马。即使有“幻灯片特效”

这就是您要搜索的滑块:)

https://github.com/nicinabox/superslides

可以在此处找到演示页面：

http://nicinabox.com/superslides/#1

希望能有所帮助。

附言:谷歌是你的朋友。

编辑:从你的评论，淡出滑块中的内容。

我猜(未测试的)你可以在淡入淡出时添加一个过渡到内容，你可以很容易地将其添加到滑块的css或js中。

Answer 3

添加到先前的答案中

至于淡出上一张幻灯片的内容，您可以使用jQuery css选择器来选择z索引为2的元素，如本文所述：

"30 CSS Selectors you must memorize“

然后使用css3过渡设置旧版本的不透明度，我不完全确定新版本。但是，超级幻灯片似乎直接脱离了无序列表，所以您可以使用第n个类型的css选择器通过jQuery再次获得正确的元素，使用js变量来存储正确的幻灯片编号。

(这仅用于正常导航，底部的导航栏需要进行一些额外的修改)