开发者

Using jQuery bgImageTransition to create continuous fadeshow

Having a hell of a time using http://plugins.jquery.com/proj开发者_运维技巧ect/bgImageTransition to create a slideshow of crossfaded images using div background urls. The reason I'm using background images is that the entire slideshow needs rounded corners and inset shadows. The problem is that the plugin seems to fade in a new image then fade back out to the original. I want each image to be new, not A, B, A, D, A, X, A, E, etc.

I made a JSFiddle: http://jsfiddle.net/dJgge/2/ and also copied the relevant code below:

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)

This basically creates #thumbshow2 on top of #thumbshow, then removes it. I figured I just need to randomize the background image of #thumbshow while #thumbshow2 is on top:

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

But wherever I put this, it creates a flashing image effect. And I also need to ensure the secretly replaced background image doesn't match the one currently on top. Suggestions?


I was able to get it working using the "Cycle" plugin which is rock solid for transitions. Check out the fiddle here and see if this gets you closer to where you need to be. It's still using background images, but doing so on separate div's which are dynamically added to the parent slide show element.

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

Cycle plugin is here....

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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜