开发者

How can I customize this script to appear an image over another?

I have a script which cross fades the images. But I have some text images which I want to appear as fading in on every image. It means, when the first images comes, it will pause, then the text image will fade in on that images and then fades out. After that the second image fades in.

function slideSwitch() {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

// use this to pull the images in the order they appear in the markup
var $next =  $active.next().length ? $active.next()
    : $('#slideshow IMG开发者_开发技巧:first');

// uncomment the 3 lines below to pull the images in random order

// var $sibs  = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next  = $( $sibs[ rndNum ] );


$active.addClass('last-active');

$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1500, function() {
        $active.removeClass('active last-active');
    });
}

$(function() {
setInterval( "slideSwitch()", 5000 );

});


Just do the text image fade-in within the callback to animate the next slide:

$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1500, function() {
        // Fade in/out text image here
        $active.removeClass('active last-active');
    });
}
0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜