幻灯片中的jQuery叠加图像

Question

我只想尝试在http://www.caffeuno.co.uk/

上找到幻灯片

我已经播放了幻灯片，但我需要的是此网站上显示的功能：

图片1，等待一点，淡入文本，淡入可点击按钮，等待3秒钟， 滚过图片2，等待一点，淡入文本，淡入可点击按钮，等待3秒钟， 滚动图片3，等等。

有人可以协助复制吗？会很好。感谢您花费的时间和建议。

Answer 1

jQuery具有.animate（）函数，可让您轻松地对图片和文本进行动画淡入淡出。

$('#image').animate({
    opacity: 1
}, 5000, function() {
    //Done fading, wait 3 seconds and display the next image
    setInterval(displayNextImage,3000);
});

有关详细信息，请参阅http://api.jquery.com/animate/。

您可能需要更改包含图像和文本的div的z-index，以便隐藏的（不透明度0）大于当前图像，然后使用上面的函数将不透明度设置为1。

我希望这有帮助！