使用 jQuery bgImageTransition 创建连续的淡入淡出

Question

使用 http://plugins.jquery.com/project/bgImageTransition 玩得很开心使用 div 背景 url 创建交叉淡入淡出图像的幻灯片。我使用背景图像的原因是整个幻灯片需要圆角和插图阴影。问题是该插件似乎会淡入新图像，然后淡出原来的图像。我希望每个图像都是新的，而不是 A、B、A、D、A、X、A、E 等。

我制作了一个 JSFiddle： http://jsfiddle.net/dJgge/2/ 并复制了下面的相关代码：

var currImage = '007.jpg';
setInterval( function(){
    do{
        var randImage = bgImages[Math.ceil(Math.random()*(bgImages.length-1))];
    }while( randImage == currImage )
    currImage = randImage;
    jQuery('#thumbshow').BgImageTransition( 'path/'+currImage );
}, 2000)

这基本上在 #thumbshow 之上创建了 #thumbshow2，然后将其删除。我想我只需要随机化 #thumbshow 的背景图像，而 #thumbshow2 位于顶部：

var randImage2 = bgImages[Math.ceil(Math.random()*(bgImages.length-1))];
jQuery('#thumbshow').css('background',"url(path/"+randImage2+")");

但无论我把它放在哪里，它都会产生闪烁的图像效果。我还需要确保秘密替换的背景图像与当前顶部的图像不匹配。建议？

Answer 1

我能够使用“Cycle”插件让它工作，该插件对于过渡来说是坚如磐石的。看看这里的小提琴，看看这是否能让你更接近你需要的地方。它仍然使用背景图像，但在动态添加到父幻灯片元素的单独 div 上执行此操作。

http://jsfiddle.net/H7Q33/1/

Cycle 插件在这里....

http://jquery.malsup.com/cycle/