如何使用jquery以淡入淡出的方式随机显示图像?

时间:2010-08-18 11:03:15

标签: javascript jquery css xhtml

这是HTML代码。

<div id="Slogan">
<h1>
<img src="img1.gif" />
<img src="img2.gif" />
<img src="img3.gif" />
<img src="img4.gif" />
<img src="img5.gif" />
</h1>
</div>

#slogan {float:left;position:relative;width:100%;}

我希望随机显示所有图像,但是像幻灯片一样一个接一个地显示,具有淡入淡出效果。如何处理jquery?

我需要最轻松的方式。

3 个答案:

答案 0 :(得分:2)

// Define a random integer function
function random( n ){
    return Math.floor( Math.random() * n );
}

// Define some variables, hide all images and show just one of them.
var transition_time = 500;
var waiting_time = 500;
var images = $('div#Slogan img');
var n = images.length;
var current = random( n );
images.hide();
images.eq( current ).show();

// Periodically, we fadeOut the current image and fadeIn a random one
var interval_id = setInterval( function(){
    images.eq( current ).fadeOut( transition_time, function(){
        current = random( n );
        images.eq( current ).fadeIn( transition_time );
    } );
}, 2 * transition_time + waiting_time);

// You can then stop the effect with:
// clearInterval( interval_id );

答案 1 :(得分:0)

所以有一个非常酷的插件,可能(或可能没有,取决于你想要它的亮度)完全按照自己的意愿行事,它被称为Nivo Slider,它有不同过渡的负载但是{{3}我选择使用淡入淡出,这是非常可定制的

on my website

答案 2 :(得分:0)

您是否尝试过使用jQuery Cycle plugin