如何在里面用css动画元素创建一个jquery图像滑块？

Question

我的客户希望我为他们的网站创建一个图像滑块（轮播）。他们希望幻灯片实际上是“滑动”而不是淡入或任何东西，并且还希望其中的内容淡入淡出。非常像这样：http://www.squarespace.com/

现在我尝试搜索jquery插件和教程如何创建这样的东西，我发现很少，主要是在codrops，但没有我可以使用，符合标准。我也找到了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

希望它有所帮助。

ps：谷歌是你的朋友。

编辑：根据您对滑块内容淡出的评论。

我猜（未经测试）您可以在淡入淡出时添加内容转换，您可以轻松地将其添加到滑块的css或js。

Answer 3

添加到先前的答案

就淡出前一张幻灯片的内容而言，你可以使用zQuery索引为2的元素的jQuery css选择器，如本文所述：

“30 CSS Selectors you must memorize”

然后使用css3过渡设置旧的不透明度，新的我不完全确定。 然而，超级滑块似乎直接从无序列表中工作，因此您可以使用nth-of-type css选择器通过jQuery再次使用js变量来获取正确的元素来存储正确的幻灯片编号。

（这仅适用于普通导航，底部的导航栏需要一些额外的修补）

Answer 4

我对Jonathan必须记住的30个CSS选择器的链接印象深刻。使用这些以及存储幻灯片编号，您几乎可以对Superslides做任何事情。喜欢这两个工具人。可能是使用jQuery和CSS的一个更好的技巧，我读过有关滑动图像的内容。我正在使用Dreamweaver在单元格填充和表格中使用。让所有这些与WordPress很好地玩，就像......真棒酱！