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，以便在使用上述函数将不透明度动画为1之前隐藏的(不透明度0)大于当前图像。

我希望这对你有帮助!